数据可视化利器:D3js入门

原作者: [db:作者] 来自: [db:来源] 收藏邀请

D3.js是一个强大的数据可视化javascript库。D3可以帮助您使用HTML，SVG和CSS将数据以非常直观的方式呈现出来。 D3js对WEB标准支持的非常友好，基本可以完美兼容当前各种浏览器。有了D3js的数据驱动模式，我们不用再纠结可视化的细节，要做的工作就是将数据转成D3js能识别的特定格式(JSON)。

要下载D3js的最新版本(4.7.4), 请点击这里:d3.zip

想要直接链接到最新版本，可以使用下面的代码片段：

< script src="https://d3js.org/d3.v4.min.js" >< /script >

完整的源代码和测试也可以在GitHub上下载。下文中将D3js简称为D3。

简介

D3允许您将任意数据绑定到文档对象模型（DOM），然后将数据驱动的转换应用于文档。例如，您可以使用D3从数组中生成HTML表。或者，使用相同的数据创建具有平滑过渡和交互的交互式SVG条形图。

D3不是一个单一的框架，旨在提供每一个可想到的功能。相反，D3解决了问题的关键：基于数据高效地处理文档。这避免了专有的表示，并提供了非凡的灵活性，能够使用HTML，SVG和CSS等Web标准的全部功能。D3非常快，能以最小的开销支持大数据集和交互动画的动态行为。 D3的函数是风格允许通过不同的组件和插件集合来做代码重用。

选择器(Selections)

使用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采用声明式方法，称为选择（Selections），可以对任意节点集进行操作。例如，您可以将上述循环重写为：

d3.selectAll("p").style("color", "white");

也可以根据需要直接操作节点：

d3.select("body").style("background-color", "black");

选择器由W3C Selectors API定义，现在浏览器都能原生支持。 Sizzle可以提供旧版浏览器的向后兼容性。以上示例按标签名称分别选择节点（“p”和“body”）。可以使用各种谓词（包括包含，属性值，类和ID）来选择元素。

D3提供了许多改变节点的方法：设置属性或样式;注册事件监听器;添加、删除或排序节点;改变HTML或文本内容。这些足以应付绝大多数的需求。直接访问底层DOM也是可能的，因为每个D3选择只是一个节点数组。

动态属性(Dynamic Properties)

熟悉其他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将检索先前绑定的数据。这允许您重新计算属性，而不需要重新绑定。

进入和退出(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(function(d) { return d; });

// Enter…
p.enter().append("p")
    .text(function(d) { return d; });

// Exit…
p.exit().remove();

通过分别处理这三种情况，您可以精确地指定哪些操作在哪些节点上运行。这提高了性能，并提供了对转换更好的控制。例如，使用条形图，您可以使用旧刻度来初始化输入栏，然后将更改和退出栏的条目转换到新的刻度。

D3允许您根据数据转换文档;这包括创建和销毁元素。 D3允许您更改现有文档以响应用户交互、随时间变化的动画、甚至来自第三方的异步通知。混合方法也是可能的：文档最初在服务器上呈现，并且通过D3在客户端上更新。

转换而不是表达(Transformation, not Representation)

D3并不引入新的视觉表示。与Processing，Raphaël或Protovis不同，D3的图形标记词汇直接来自Web标准：HTML，SVG和CSS。例如，您可以使用D3创建SVG元素，并使用外部样式表进行样式化。您可以使用复合过滤器效果，虚线和裁剪。如果浏览器供应商明天推出新功能，您将能够立即使用它们，无需进行工具包更新。而且，如果您将来决定使用除D3以外的工具包，您可以随身携带您的标准知识！

最重要的是，D3使用浏览器的内置元素检查器很容易调试：您使用D3操作的节点正是浏览器原生理解的节点。

渐变(Transitions)

D3聚焦于将转换自然扩展到动画渐变。随时间变化自动插入样式和属性。可以通过诸如“弹性”，“立方英寸”和“线性”的松弛功能来控制补片。 D3的插值器支持原语，例如字符串中嵌入的数字和数字（字体大小，路径数据等）和复合值。您甚至可以扩展D3的interpolator注册表，以支持复杂的属性和数据结构。

d3.select("body").transition()
    .style("background-color", "black");

或者，以一个错开的(staggered)延迟来调整符号图中的圈子大小：

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不会取代浏览器的工具箱，而是扩展成更容易使用的方式。

想要了解更多D3js知识？阅读这些:教程、官网