d3 中文介绍

是一个基于数据操做文档JavaScript库。D3帮助你给数据带来活力经过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的所有功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式操做Dom。

D3容许绑定任何数据到DOM对象模型，而后应用数据驱动转换到文档。例如：你能够用D3从数组生成HTML表格，或者使用相同数据平滑和动态建立一个SVG图表。

D3不是一个庞大的框架，像想象那样提供许多功能。相反，D3解决这关键问题：基于数据文档高效操做。避免专有的表现，同时提供良好适应性。公开所有功能，如CSS三、HTML5和SVG网页标准，不多的开销，D3速度很是快。支持大数据集和动态交互和动画效果。D3的功能设计容许代码重用，经过集合不一样的组件和插件。

选定对象：Selections

传统方式

var paragraphs = document.getElementsByTagName("p"); 
for (var i = 0; i < paragraphs.length; i++) { 
  var paragraph = paragraphs.item(i); 
  paragraph.style.setProperty("color", "white", null); 
}

D3.js操做

d3.selectAll("p").style("color", "white");

D3提供不少方法来变化节点：设置属性或样式；注册时间监听器；添加，移除或整理节点；更换HTML 或文本内容。

动态属性

随机改变颜色

d3.selectAll("p").style("color", function() { 
  return "hsl(" + Math.random() * 360 + ",100%,50%)"; 
});

根据奇偶变换颜色

d3.selectAll("p").style("color", function(d, i) { 
  return i % 2 ? "#fff" : "#eee"; 
});

数据绑定，data数组中第一个元素绑定selection的第一个节点，依次类推

d3.selectAll("p") 
    .data([4, 8, 15, 16, 23, 42]) 
    .style("font-size", function(d) { return d + "px"; });

当data绑定selection时候，数组的每一个元素都和selection中节点对应。若是节点node数量少于data，多余的data构成enter 输入

// Update… 
var p = d3.select("body").selectAll("p") 
    .data([4, 8, 15, 16, 23, 42]) 
    .text(String); 

// Enter… 
p.enter().append("p") 
    .text(String); 

// Exit… 
p.exit().remove();

d3 提供强大的api 参考，具体访问 https://github.com/mbostock/d3/wiki/Api%E5%8F%82%E8%80%83

最近在项目中运用到了d3 tree, 详细的接口说明请看 http://segmentfault.com/blog/joanna123/1190000000422344

下面是一个在项目中运用的实例：

效果图：

其中加号表明有子节点的，若是有异常，才会展开子节点，若是没有异常是不展开子节点。

具体代码，详细下面的实例代码。

http://segmentfault.com/blog/joanna123/1190000000701760