为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. 6.006 Introduction to Algorithms

    课程信息 6.006 Introduction to Algorithms

  2. 记一次走心One 2 One沟通

    聊的比较零零碎碎,内容比较散,有些solution不错,记一些要点吧(1)要学会汇报,就是坐你身边的人,也未必知道你在干啥 三个人都在砌墙.当人们分别问他们在做什么,他们的答案却不一样:第一个人头也没 ...

  3. VMware Workstation 12激活码

    VMware Workstation 12 Pro key/注册码: VY1DU-2VXDH-08DVQ-PXZQZ-P2KV8 VF58R-28D9P-0882Z-5GX7G-NPUTF YG7XR ...

  4. Firebird Case-Insensitive Searching 大小写不敏感查找

    Firebird 默认是大小写敏感,在检索的时候. 要想不敏感检索,两种方法: 1.where upper(name) = upper(:flt_name) 2.检索时指定字符集collation,例 ...

  5. Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动

    如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯.因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的.在标准的数学坐标系中,X轴表示水平 ...

  6. Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)

    Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...

  7. mybatis学习之入门实例

    测试版本 mybatis:3.2.8 数据库:mysql 项目结构 jar包准备 mybatis-3.2.8.jar mysql-connector-java-5.1.39-bin.jar junit ...

  8. final 、finalize和finally的区别

    2019-04-1217:29:40 (1)final用于声明属性,方法和类,分别表示属性不可变,方法不可覆盖,类不可继承.内部类要访问局部变量,局部变量必须定义成final类型,比如一段代码 (2) ...

  9. instanceof -- JS

    在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”. ...

  10. getElementsByName属性

    getElementsByName() 方法可返回带有指定名称的对象的集合 语法 document.getElementsByName(name) 该方法与 getElementById() 方法相似 ...