D3.js非常官方的入门指南

D3.js专注于数据可视化的Js库,强大的基于数据的DOM操作,D3帮助您使用HTML、SVG和CSS操作数据。D3对web标准友好,提供了现代浏览器支持的全部功能,而无需依赖特殊框架。

一言

D3允许您将任意数据绑定到文档对象模型(DOM),然后将数据驱动转换应用到DOM文档元素上。例如,可以使用D3从数组生成HTML表格。或者,使用相同的数据创建具有平滑过渡和交互能力的交互式SVG柱状图。

D3不应该被当作是一个庞大的框架,它不会试图提供所有的特性。相反,D3只用来解决了最关键的问题:基于数据的高效DOM操作。这避免了定制化带来的局限性,提供了非凡的灵活性。D3的对性能开销最小,速度飞快,支持大型数据集以及动态行为,擅长被用于交互和动画。D3允许通过各种官方和社区开发渠道对模块进行代码重用。

选择器

使用W3C DOM API修改DOM总是显得粗手笨脚:表现为方法名称冗长;强制方法需要手工迭代以及临时状态的标记。例如使用原生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");

当然,您仍然可以根据需要操作单个节点:

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

选择器由W3C选择器API定义,所有现代浏览器都原生支持。上面的示例中,通过标签名选择节点(分别为“p”和“body”)。还可以通过其他选择器选择元素,比如属性值、类名和元素id。

D3为待操作的节点提供了诸多方法:设置属性、样式;注册事件侦听器;添加、删除或排序节点;改变HTML或文本内容。这些满足了绝大多数的开发需求。直接访问底层DOM也是可能的,因为每个D3 Selection就是诸多节点数组的集合。

动态属性

熟悉其他DOM框架(如jQuery)的读者应该已经感觉到他们与D3的相似之处。然而样式、属性和其他属性可以通过函数传参的方式动态设置,而不仅仅是简单的设置常量。尽管这些函数看起来很简单,但它们的功能却非常强大。例如,d3.geoPath 函数将地理坐标投影到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)传递给函数。使用默认的逐个索引连接,数据数组中的第一个元素被传递到选择中的第一个节点,第二个元素被传递到第二个节点,依此类推。例如,如果将数字数组绑定到段落元素,可以使用这些数字来计算动态字体大小:

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

数据绑定到文档后,可以省略数据操作符,D3将检索以前绑定的数据。这允许您在不重新绑定的情况下重新计算属性。

添补与销毁

使用D3的enter和exit选择器,您可以为增加的数据创建新DOM节点,并删除不再需要的DOM节点。

当数据绑定到一个选择器时,数据数组中的每个元素都与选择中的相应节点配对。如果节点比数据少,那么额外的数据元素形成enter选择,您可以通过在enter选择后面添加来实例化它。例如:

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

更新节点是默认操作。因此,如果您忘记了输入和退出选择,您将只自动选择存在相应数据的元素。一个常见的模式是将初始选择分解为三个部分:要修改的更新节点(update)、要添加的输入节点(enter)和要删除的退出节点(exit)。

// 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允许根据数据转换DOM文档;这包括创建和销毁元素。D3允许您更改现有文档,以响应用户交互、动画、甚至来自第三方的异步通知。一种混合方法甚至是可能的,即文档最初在服务器上呈现,然后通过D3在客户机上更新。

非转换表示

D3没有引入新的视觉表示。与Processing或Protovis不同,D3的图形标记词汇表直接来自web标准:HTML、SVG和CSS。例如,您可以使用D3创建SVG元素并使用外部样式表对其进行样式化。可以使用复合过滤效果、虚线笔画和裁剪。如果浏览器厂商明天引入了新特性,您将能够立即使用它们——不需要工具包更新。而且,如果您将来决定使用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没有替换浏览器的工具箱,但是以一种更容易使用的方式公开它。

文章标签:d3

永久链接:http://www.shuaihua.cc/article/d3js-official-guide

快速跳转:陈帅华 - 心头好文 - libraries - D3.js非常官方的入门指南

d3js-official-guide

发表日期:2018-8-6

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证