中英文模式阅读
中文模式阅读
英文模式阅读


| See more examples
.

D3.js
是一个用于根据数据操作文档的JavaScript库。 D3
帮助您使用HTML,SVG和CSS将数据变为现实。 D3对Web标准的强调为您提供了现代浏览器的全部功能,而无需将自己与专有框架联系起来,将强大的可视化组件和数据驱动方法结合到DOM操作中。


在这里下载最新版本:{#version}


要直接链接到最新版本,请复制以下代码段:

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

The full source and tests
也可以for download
on GitHub.

#{#introduction}Introduction


| | Read more tutorials
.

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


D3不是一个单一的框架,旨在提供所有可能的功能。相反,D3解决了问题的关键:基于数据有效地处理文档。这避免了专有的表示,并提供了非凡的灵活性,暴露了HTML,SVG和CSS等Web标准的全部功能。 D3的开销极小,支持大型数据集和交互动画的动态行为。 D3的功能风格允许通过各种各样的集合重用代码official
and community-developed
modules.

#{#selections}Selections


| | Read more about 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", "blue", null);
}

D3采用声明式方法,在任意节点集上运行 selections
。例如,您可以将上面的循环重写为:

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

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

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

选择器由。定义W3C Selectors API
并由现代浏览器本地支持。以上示例按标签名称选择节点("p"
and "body"
, 分别)。可以使用各种谓词来选择元素,包括包含,属性值,类和ID。


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

#{#properties}Dynamic Properties


熟悉其他DOM框架的读者,如jQuery
应立即认识到与D3的相似之处。然而,样式,属性和其他属性可以指定为 functions of data
在D3中,不仅仅是简单的常量。尽管它们显而易见,但这些功能可以令人惊讶地强大;该d3.geoPath
功能,例如,项目geographic coordinates
into SVG path data
。 D3提供了许多内置的可重用功能和功能工厂,例如graphical primitives
用于区域,线和饼图。


例如,随机着色段落:

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

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

#{#enter-exit}Enter and Exit


| | Read more about data joins
.


Using D3's enter
and exit
选择时,您可以为传入数据创建新节点并删除不再需要的传出节点。


当数据绑定到选择时,数据数组中的每个元素都与选择中的相应节点配对。如果节点数量少于数据,则额外的数据元素将形成输入选择,您可以通过附加到实例来实例化enter
选择。例如:

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

更新节点是默认选择---结果data
运营商。因此,如果您忘记了进入和退出选择,您将自动选择仅存在相应数据的元素。常见的模式是将初始选择分为三个部分:要修改的更新节点,要添加的进入节点以及要删除的现有节点。

// 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}Transformation, not Representation


D3没有引入新的视觉表现。不像Processing
or Protovis
,D3的图形标记词汇直接来自Web标准:HTML,SVG和CSS。例如,您可以使用D3创建SVG元素,并使用外部样式表对其进行样式设置。您可以使用复合滤镜效果,虚线笔划和剪裁。如果浏览器厂商明天推出新功能,您将能够立即使用它们 - 无需更新工具包。而且,如果您决定将来使用D3以外的工具包,您可以随身携带标准知识!


最重要的是,使用浏览器的内置元素检查器可以轻松调试D3:使用D3操作的节点正是浏览器本身可以理解的节点。

#{#transitions}Transitions


D3对转换的关注自然延伸到动画转换。随着时间的推移,过渡会逐渐插入样式和属性。可以通过缓和功能来控制补间,例如"弹性","立方体输出"和"线性"。 D3的内插器支持两种基元,例如字符串中嵌入的数字和数字(字体大小,路径数据, etc.
)和复合值。您甚至可以扩展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不会取代浏览器的工具箱,但会以更易于使用的方式公开它。


想了解更多?读these tutorials
.

中英文模式阅读
中文模式阅读
英文模式阅读

查看英文原文

查看更多文章


公众号:银河系1号


联系邮箱:public@space-explore.com


(未经同意,请勿转载)