d3.js官网:http://d3js.org/
接触d3.js是因为leader让我研究它并运用到新项目开发中去,所以就花时间了解了一下。写下此文来和大家分享学习,如有不足,欢迎指正。
首先,说下我对d3.js的理解。
d3其实就是一个框架,就像是juery一样,封装一些功能。
d3全称:Data-Driven Documents,是一个JavaScript库,用于操纵基于数据的文档。D3帮助你通过使用HTML、SVG和CSS给数据带来活力。D3强调web标准,给你提供现代浏览器的各种能力,而不是把你束缚在专有的框架中,结合强大的可视化组件和数据驱动方式的DOM操作。
下载最新版本:d3.v3.zip
或者,直接链接到最新版本,复制这个代码片段:
1.介绍 LEARN MORE
D3允许您绑定任意数据到一个文档对象模型(DOM),然后采用数据驱动转换成文档。例如,您可以使用D3把一个数字数组生成一个HTML表。或者,使用相同的数据通过平稳的过渡和交互,创建一个交互式SVG条形图。
D3不是旨在提供功能的单一框架。相反,D3解决了问题的症结所在:有效的基于数据操纵文档,展现了web标准(如HTML5和CSS3,SVG)的完整功能。D3用最快的速度,最小的开销,支持大型数据集、动态行为交互和动画。D3通过整合不同的组件和插件,允许代码重用。
2.选择(Selections) LEARN MORE 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则可以声明方法来选择操作任意组节点。
例如,您可以重写上述循环:
d3.selectAll("p").style("color", "white");
也可以根据需要操作单独的节点:
d3.select("body").style("background-color", "black");
D3提供了许多方法来改变节点:设置属性,注册事件侦听器,添加、移除或排序节点,改变HTML或文本内容。直接访问底层DOM也是可能的,因为每个D3只是选择一组节点。
3.动态属性(Dynamic Properties)
读者若是熟悉其他DOM框架,如jquery,应该能很快发现与D3的相似性。然而,在D3中样式、属性和其他参数都可以被指定为函数的数据,而不仅仅是简单的常量。D3提供了很多内置的可重用函数和函数工厂,如绘制图形( graphical primitives)、线和饼图。这点很像HTML5的一些新特性。
例如,给段落随机赋予颜色:
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被定义为一个数组的值,每个值作为第一个参数传递(d)来选择函数(对D3来说d是一个很重要的参数)。通过默认索引,数据中的第一个数组元素传递到第一个节点的选择,第二个元素到第二个节点,等等。例如,如果给段落元素绑定一组数,您可以使用这些数据来计算动态字体大小:
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
一旦数据被绑定到文档,就可以省去数据操作,D3将检索以前绑定的数据,这允许你可以再计算属性而不需要重新连接。
4.输入和输出(Enter and Exit) LEARN MORE Enter and Exit
使用D3的输入和输出的选择,您不再需要创建新的节点来输入数据和删除外溢节点。当选择数据绑定时,则数组中的每个元素与选择的节点对应。如果节点比数据少,则额外的数据元素形成输入选择,您可以通过附加输入选择进行实例化。例如:
d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
// 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让您基于数据转换文档,这包括创建和销毁元素。D3允许你改变一个现有的文档以响应用户交互、超时动画,甚至来自第三方的一个异步通知。
5. 过渡(Transitions)
过渡随着时间逐渐插入styles 和 attributes ,可以通过像“elastic”,“cubic-in-out”,“linear”等功能来控制渐变。
例如,渐变背景色为黑色。
d3.select("body").transition()
.style("background-color", "black");
d3.selectAll("circle").transition()
.duration(750)
.delay(function(d, i) { return i * 10; })
.attr("r", function(d) { return Math.sqrt(d * scale); });