当前位置: 首页>>技术教程>>正文


数据可视化利器:D3js入门

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入门

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

本文由《纯净天空》出品。文章地址: https://vimsky.com/article/3279.html,未经允许,请勿转载。