d3 中文介绍 - HelloWorld开发者社区

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

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

D3不是一个庞大的框架，像想象那样提供许多功能。相反，D3解决这关键问题：基于数据文档高效操作。避免专有的表现，同时提供良好适应性。公开全部功能，如CSS3、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

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

效果图：
d3 中文介绍