为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. 【读书笔记】读《编写可维护的JavaScript》 - 编程风格(第一部分)

    之前大致翻了一遍这本书,整体感觉很不错,还是不可追求快速,需要细细理解. 这篇随笔主要对本书的第一部分中对自己触动比较大的部分及与平常组织代码最为息息相关的部分做一个记录,加深印象. 主要讲述五点内容 ...

  2. 使用Electron开发桌面应用

    Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...

  3. jquery.edatagrid(可编辑datagrid)的使用

    用spring+springmvc+mybatis+mysql实现简单的可编辑单元格,首先是页面效果图: 其中,“编号”列是不可编辑的,“暂缓措施”是可以自由编辑的,主要html组成: <%@ ...

  4. spring_boot启动报错

    配置好pom文件后,在controller加注解,如下: 运行后报错!!! 发现配置加的是多此一举,修改为下边的,运行OK

  5. python7

    字典-dict     字典也是一种组合数据,没有顺序的组合数据,数据以键值对的方式存在 字典的定义     1.创建空字符串         变量 = {} 或者 变量 = dict()     2 ...

  6. zoj 3524(拓扑排序+多重背包)(好题)

    http://blog.csdn.net/woshi250hua/article/details/7824773 题目大意:从前有n座山,山里都有一座庙,庙里都有一个老和尚,老和尚专送纪念品,每个纪念 ...

  7. Dockerfile定制镜像

    一.Dockerfile是什么? 镜像定制实质就是定制每一层所添加的配置.文件. Dockerfile就是一个脚本来构建和定制镜像,把每一层的修改.安装.构建.操作都写入脚本.以此来解决体积.镜像构建 ...

  8. Angularjs ngTable使用备忘

    项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. ...

  9. JavaScript 事件委托

    JavaScript事件委托,或者叫事件代理,是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 借花献佛的例子(取快递): 有三个同事预计会在周一收到快递.为签收快递,有两种办法 ...

  10. (1-1)line-height的定义和行内框盒子模型

    (1-1)line-height的定义和与行内框盒子模型的关系 一.line-height的定义 line-height的定义: 行高,又称为两基线的距离.默认基线对齐(因为CSS所有*线:总之就是各 ...