为DOM元素添加class

.attr("class", "bar")  //为元素添加class属性,<div class="bar"></div>

.classed("bar", true)   //添加class "bar"
.classed("bar", false) //删除class "bar"

Drawing Bars:

var dataset = [ , , , ,  ];

d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar"); //css
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override height later */
background-color: teal;
}

Setting Styles

.style("height", function(d) {
return d + "px";
});

优化一下

.style("height", function(d) {
var barHeight = d * ; //Scale up by factor of 5
return barHeight + "px";
}); //并设margin-right:2px;

D3——根据数据画图的更多相关文章

  1. matlab导入txt数据画图

    因为最近需要观察txt保存的一堆数据,则需要使用这些数据画图.强大的matlab分分钟解决了. 实例数据:data.txt 步骤: ①打开matlab -> HOME(主页) -> Imp ...

  2. d3.js:数据可视化利器之快速入门

    hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...

  3. D3中数据与DOM element绑定之data() enter() exit()浅析

    几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works.  ...

  4. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  5. d3.js:数据可视化利器之 交互行为:响应DOM事件

    selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...

  6. d3.js:数据可视化利器之 selection:选择集

    选择集/selection 选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素: d3提供了两个方法用来创建selection对象: select(selecto ...

  7. D3——动态绑定数据

    一.绑定数组元素 , , , , ]; d3.select("body") .selectAll("p") .data(dataset) .enter() .a ...

  8. d3 根据数据绘制svg

    , , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...

  9. d3 使用数据

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. python 对象/变量&赋值的几点思考

    python 对象/变量 对象 Every object has an identity, a type and a value. An object's identity never changes ...

  2. xcode配置文件中,Architectures表示的意义

    xcode配置文件中,Architectures表示的意义 ======================== Architecture : 指你想支持的指令集. Valid architectures ...

  3. sz的博客感想

    https://www.cnblogs.com/freeflying/p/4796369.html 在很多人眼里,当把中学和大学对比起来的时候,大学只能用一个字形容:“渣”.我的大学前两年过得比较随性 ...

  4. JMS消息中间件之ActiveMQ学习

    1.下载 下载二进制bin文件:http://activemq.apache.org/activemq-5132-release.html 下载源码: 2.启动: 解压任意路径: 启动后: 3.访问: ...

  5. nodejs操作excel并配合edatagrid使用

    nodejs读取文件夹下子文件(夹)名称: /** * 查询tmp文件夹下子文件夹名称 */ router.post("/tmpList", function (req, res) ...

  6. 一:Nginx知识整理

    Nginx与服务器集群 一:集群 1.什么是集群 集 合在一起 放在一起 群 一堆 很多 服务器架构集群:多台服务器组成的响应大并发,高数据量访问的架构体系. 分布式服务器架构: 特点: 1)成本高 ...

  7. IntelliJ IDEA+Mysql connecter/j JDBC驱动连接

    在IntelliJ IDEA中用connecter/j jdbc驱动连接MYSQL 以下是解决过程,待整合...有点懒,有空再改 官方文档:https://www.cnblogs.com/cn-chy ...

  8. 关于iframe中使用fixed定位的一些问题

    先来看看position: fixed:的定义:生成绝对定位的元素,相对于浏览器窗口进行定位: 但是在iframe中使用fixed定位,实际上是相对于iframe窗口进行定位,原因在于iframe类似 ...

  9. 谈谈HTML5中的history.pushSate方法,弥补ajax导致浏览器前进后退无效的问题

    移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...

  10. webapi下载文件

    [HttpGet] public IHttpActionResult ExportData() { ... var dt = ExcelHelper.ListToDataTable(list); va ...