是一个基于数据操作文档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
下面是一个在项目中运用的实例:
效果图:
其中加号代表有子节点的,如果有异常,才会展开子节点,如果没有异常是不展开子节点。
具体代码,详细下面的实例代码。