为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. Jquery执行效率提高的方法

    1.选择器性能排行:$("#ID") > $("Tag") > $(".Class") > $("[attrib ...

  2. 使用YUM安装MySQL 5.5(适用于CentOS6.2/5.8及Fedora 17/16平台)

    目前CentOS/Red Hat (RHEL) 6.2官方自带的mysql版本为5.1,mysql5.5已经出来了. 相比mysql5.1,mysql5.5不仅在多个方面进行了改进: 性能上有了很大提 ...

  3. 微信小程序准备阶段。(一)

    --知识储备--HTML+JS+CSS (一)下载一个微信web开发工具(后续代码都会写在这里边)附上链接:https://mp.weixin.qq.com/debug/wxadoc/dev/devt ...

  4. C#语言-03.逻辑控制语句

    a. 逻辑控制语句: i. 条件语句:先对条件判断,然后根据判断结果执行不同的分支 . If 和 if-else:判断“布尔表达式的值”来决定执行那个代码块 a. 语法:if(布尔表达式){ b. 布 ...

  5. crontab 设置服务器定期执行备份工作

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  6. 十、cent OS开启APR模式报错:configure: error: Found APR 1.3.9. You need version 1.4.3 or newer installed

    错误内容显示APR的版本过低,需要新版本 到http://apr.apache.org/download.cgi#apr1这个地址下载所需要的包apr-1.4.5.tar.gz apr-iconv-1 ...

  7. Python中元组和列表

    一.list列表的操作包括以下函数: 列表操作包括以下函数: 1.cmp(list1,list2) :比较两个列表的元素 2.len(list) :列表元素个数 3.max(list) :返回列表元素 ...

  8. 重构指南 - 分解复杂判断(Remove Arrowhead Antipattern)

    当代码中有多层嵌套时,会降低代码的可读性,对于以后的修改也增加难度,所以我们需要分解复杂的判断并尽快返回. 重构前代码 public class Security { public ISecurity ...

  9. SQLServer导入大sql文件报错 对 COM 组件的调用返回了错误 HRESULT E_FAIL。 (mscorlib)

    打开cmd执行(d:\script.sql为sql文件位置):  sqlcmd -S 127.0.0.1 -U sa -P sa -i d:\script.sql    From:https://ww ...

  10. 创建线程后马上CloseHandle(threadhandle)起什么作用

    原文:http://www.cnblogs.com/eddyshn/archive/2010/04/14/1711674.html HANDLE threadhandle = CreateThread ...