D3js简介

D3.js是一个基于数据的文档操控JavaScript库。使用HTML,SVG和CSS,D3能够帮你让数据活起来。D3所强调的Web标准帮助开发者在无需捆绑任何专有框架的前提下,结合强大的可视化组件及其数据驱动的DOM操纵方法,充分利用现代浏览器的全部功能。

点此下载最新版本(3.4.1):d3.v3.zip

或者,复制这段代码直接链接最新版本:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

使用HTTPS的站点可能需要自行保留D3的源文件,或者使用一个支持HTTPS的CDN,比如CDNJS全部源文件和测试用例也可以在GitHub中下载得到。

简介:

D3允许开发者将任意数据绑定在文档对象模型(DOM)之上,然后再应用数据驱动转换到文档中。例如,你可以使用D3从一个数组生成一个HTML表格。或者使用同样的数据来创建一个带有平滑过渡和互动功能的交互式SVG柱状图。

D3并非一个旨在涵盖所有功能特征的整体框架,相反,D3解决的问题核心是:基于数据的高效文档操作。这避免了局限的数据展现,提供了非凡的灵活性,体现出诸如CSS3,HTML5和SVG等Web标准的全部功能。使用最小的开销,D3的速度非常快,支持大型数据集以及交互与动画的动态行为。D3的函数风格允许通过各种组件和插件的形式进行代码的重用。

选择

使用W3C DOM API修改文档时十分繁琐的:方法名冗长,并且必须使用的方法需要人工迭代和对临时状态的维护。例如,要改变段落元素的文本颜色:


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");

选择器被定义在W3C选择器API之中并且被现代浏览器原生支持。对于老版本浏览器的向后兼容可以通过Sizzle提供。上面的例子中通过标签名称(分别是”p”和”body”)选择节点。元素可以通过使用各种谓词来进行选择,包括容器,属性值,类和ID。

D3提供了改变节点的方法:设置属性或者样式;注册事件监听器;对节点进行添加,删除或者排序;以及改变HTML或者文本内容。这些可以满足大部分需求。对底层DOM的直接访问也是可以的,因为每一个D3选择集合只是节点的数组而已。

动态属性

熟悉其他DOM框架,比如jQuery或者Prototype的读者应该可以马上发现它们与D3的相似之处。然而在D3中,样式、属性和其它一些属性可以通过数据函数的形式指定,而不仅仅限于常量。尽管看起来很简单,这些函数却是异常强大;比如d3.geo.path可以将地理坐标映射在SVG路径数据当中。D3提供了许多内建的可重用函数和函数工厂,比如区域、线条和饼图的图元。

举个例子,随机为段落着色:


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";
});

计算得出的属性经常指向被绑定的数据。数据是由数值数组指定的,并且每一个数值通过选择函数的第一个参数(d)来传递。使用默认的索引连接(join-by-index),数据数组中的第一个元素传递给选择集合中的第一个节点,第二个元素传给第二个节点,以此类推。例如,如果你将一组数字绑定给段落元素,你可以使用这些数字计算出动态的字体大小:


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

一旦数据与文档绑定,你可以省略数据操作符;D3会取出先前绑定的数据。这允许你无需重新绑定即可再次对属性进行计算。

输入和退出

使用D3的输入选择器和退出选择器,你可以为新数据创建新节点,移除不再需要的节点。

当数据与选择集合绑定后,数据数组中的每一个元素都与选择集合中的节点一一对应。如果节点比数据少,多余的数据元素形成了输入选择器,你可以通过添加至输入选择器的方式实例化。比如:


d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });

更新节点是缺省选择器——数据运算符的结果。因此,如果你忘记输入和退出选择器,你会自动地只选择存在对应数据的元素。一种通用的模式是将初始选择集合拆分为3部分:要修改的更新节点,要添加的输入节点和要移除的退出节点。


// 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();

通过分别处理这3种情况,你可以精确的制定某一个节点要执行何种操作。这样可以提高性能,同时可以对过渡提供了更好的控制。例如,对于一个条形图,你可能使用旧的比例初始化输入数据条,之后随着数据条的更新和移除将输入数据条过渡为新的比例。

D3可以让你基于数据来对文档进行过渡;这包括创建和销毁元素。D3允许你改变一个既存文档来相应用户,随时间改变的动画,或者甚至来自第三方的异步通知。混合方法也是可以的,文档由服务器初始渲染,并且在客户端使用D3进行更新。

转化,而非展示

D3不是一个新的图形展示库。不同于Processing, Raphaël, 或者Protovis, 标记词汇表直接来源于Web标准:HTML, SVG和CSS。比如说,你可以使用D3创建SVG元素然后使用外部样式表指定样式。你可以使用组合过滤效果,dashed strokes 和 clipping。如果浏览器厂商在将来引入新的特性,你将能够第一时间使用它们,不需要更新工具包。并且,如果将来你决定使用D3以外的工具包,你可以带上自己的对标准的了解。

最重要的是,D3很容易使用浏览器内置的元素审查器进行调试:你通过D3操作的节点就是浏览器原生支持的节点。

过渡

D3对于转化的关注自然地扩展到动画过渡。过渡随着时间逐渐插入样式和属性。渐变可以通过缓动函数进行控制,比如”elastic”,”cubic-in-out”和”linear”。D3的内插器支持基本数据类型,比如数字和嵌入字符串的数字(字体大小,路径数据等),和符合值。你甚至可以扩展D3的差值注册来支持复杂的属性和数据结构。

比如,淡入页面背景为黑色:


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); });

通过只对的确发生了变更的属性进行修改,D3减少了系统开销并且允许较高帧速率的图形复杂度。D3还允许经由事件的复杂过渡序列。并且你还可以使用CSS3过渡;D3不会替代浏览器的工具箱,而是以一种更加易用的方式将它暴露出来。

本文链接:http://bookshadow.com/weblog/2014/02/17/d3js/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码