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/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。

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

Pingbacks已关闭。

暂无评论

张贴您的评论