D3.js - Data-Driven Documents D3.js - 数据驱动文档

| See

| See more examples .

.

D3.jsis a JavaScript library for manipulating documents based on data.

是一个用于根据数据操作文档的JavaScript库。 D3 helps you bring data to life using HTML, SVG, and CSS. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

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

Download the latest version here: {#version}

在这里下载最新版本：{＃version}

• d3.zip {#download}

To link directly to the latest release, copy this snippet:

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

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

The

The full source and tests are also available

也可以 for download on GitHub.

on GitHub.

{#introduction}Introduction

| | Read

| | Read more tutorials .

.

D3allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

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

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3's functional style allows code reuse through a diverse collection of

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

and community-developed modules.

modules.

{#selections}Selections

| | Read

| | Read more about selections .

.

Modifying documents using the

使用。修改文档 W3C DOM API is tedious: the method names are verbose, and the imperative approach requires manual iteration and bookkeeping of temporary state. For example, to change the text color of paragraph elements:

单调乏味：方法名称冗长，命令式方法需要手动迭代和临时状态簿记。例如，要更改段落元素的文本颜色：

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 employs a declarative approach, operating on arbitrary sets of nodes called

D3采用声明式方法，在任意节点集上运行 selections . For example, you can rewrite the above loop as:

。例如，您可以将上面的循环重写为：

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

Yet, you can still manipulate individual nodes as needed:

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

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

Selectors are defined by the

选择器由。定义 W3C Selectors API and supported natively by modern browsers. The above examples select nodes by tag name (

并由现代浏览器本地支持。以上示例按标签名称选择节点（ "p" and

and "body" , respectively). Elements may be selected using a variety of predicates, including containment, attribute values, class and ID.

， 分别）。可以使用各种谓词来选择元素，包括包含，属性值，类和ID。

D3 provides numerous methods for mutating nodes: setting attributes or styles; registering event listeners; adding, removing or sorting nodes; and changing HTML or text content. These suffice for the vast majority of needs. Direct access to the underlying DOM is also possible, as each D3 selection is simply an array of nodes.

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

{#properties}Dynamic Properties

Readers familiar with other DOM frameworks such as

熟悉其他DOM框架的读者，如 jQuery should immediately recognize similarities with D3. Yet styles, attributes, and other properties can be specified as

应立即认识到与D3的相似之处。然而，样式，属性和其他属性可以指定为 functions of data in D3, not just simple constants. Despite their apparent simplicity, these functions can be surprisingly powerful; the

在D3中，不仅仅是简单的常量。尽管它们显而易见，但这些功能可以令人惊讶地强大;该 d3.geoPath function, for example, projects

功能，例如，项目 geographic coordinates into SVG

into SVG path data . D3 provides many built-in reusable functions and function factories, such as

。 D3提供了许多内置的可重用功能和功能工厂，例如 graphical primitives for area, line and pie charts.

用于区域，线和饼图。

For example, to randomly color paragraphs:

例如，随机着色段落：

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

To alternate shades of gray for even and odd nodes:

为偶数和奇数节点交替灰度阴影：

d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

Computed properties often refer to bound data. Data is specified as an array of values, and each value is passed as the first argument (

计算属性通常引用绑定数据。数据被指定为值数组，每个值作为第一个参数传递（ d ) to selection functions. With the default join-by-index, the first element in the data array is passed to the first node in the selection, the second element to the second node, and so on. For example, if you bind an array of numbers to paragraph elements, you can use these numbers to compute dynamic font sizes:

）选择功能。使用默认的索引连接，数据数组中的第一个元素将传递给选择中的第一个节点，第二个元素传递给第二个节点，依此类推。例如，如果将数字数组绑定到段落元素，则可以使用这些数字来计算动态字体大小：

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

Once the data has been bound to the document, you can omit the

一旦数据绑定到文档，您可以省略 data operator; D3 will retrieve the previously-bound data. This allows you to recompute properties without rebinding.

操作; D3将检索先前绑定的数据。这允许您在不重新绑定的情况下重新计算属性。

{#enter-exit}Enter and Exit

| | Read

| | Read more about data joins .

.

Using D3's

Using D3's enter and

and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed.

选择时，您可以为传入数据创建新节点并删除不再需要的传出节点。

When data is bound to a selection, each element in the data array is paired with the corresponding node in the selection. If there are fewer nodes than data, the extra data elements form the enter selection, which you can instantiate by appending to the

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

选择。例如：

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

Updating nodes are the default selection---the result of the

更新节点是默认选择---结果 data operator. Thus, if you forget about the enter and exit selections, you will automatically select only the elements for which there exists corresponding data. A common pattern is to break the initial selection into three parts: the updating nodes to modify, the entering nodes to add, and the exiting nodes to remove.

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

// 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();

By handling these three cases separately, you specify precisely which operations run on which nodes. This improves performance and offers greater control over transitions. For example, with a bar chart you might initialize entering bars using the old scale, and then transition entering bars to the new scale along with the updating and exiting bars.

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

D3 lets you transform documents based on data; this includes both creating and destroying elements. D3 allows you to change an existing document in response to user interaction, animation over time, or even asynchronous notification from a third-party. A hybrid approach is even possible, where the document is initially rendered on the server, and updated on the client via D3.

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

{#transformation}Transformation, not Representation

D3 does not introduce a new visual representation. Unlike

D3没有引入新的视觉表现。不像 Processing or

or Protovis , D3's vocabulary of graphical marks comes directly from web standards: HTML, SVG, and CSS. For example, you can create SVG elements using D3 and style them with external stylesheets. You can use composite filter effects, dashed strokes and clipping. If browser vendors introduce new features tomorrow, you'll be able to use them immediately---no toolkit update required. And, if you decide in the future to use a toolkit other than D3, you can take your knowledge of standards with you!

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

Best of all, D3 is easy to debug using the browser's built-in element inspector: the nodes that you manipulate with D3 are exactly those that the browser understands natively.

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

{#transitions}Transitions

D3's focus on transformation extends naturally to animated transitions. Transitions gradually interpolate styles and attributes over time. Tweening can be controlled via easing functions such as "elastic", "cubic-in-out" and "linear". D3's interpolators support both primitives, such as numbers and numbers embedded within strings (font sizes, path data,

D3对转换的关注自然延伸到动画转换。随着时间的推移，过渡会逐渐插入样式和属性。可以通过缓和功能来控制补间，例如"弹性"，"立方体输出"和"线性"。 D3的内插器支持两种基元，例如字符串中嵌入的数字和数字（字体大小，路径数据， etc. ), and compound values. You can even extend D3's interpolator registry to support complex properties and data structures.

）和复合值。您甚至可以扩展D3的插补器注册表以支持复杂的属性和数据结构。

For example, to fade the background of the page to black:

例如，要将页面背景淡化为黑色：

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

Or, to resize circles in a symbol map with a staggered delay:

或者，使用交错延迟调整符号映射中的圆圈：

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });

By modifying only the attributes that actually change, D3 reduces overhead and allows greater graphical complexity at high frame rates. D3 also allows sequencing of complex transitions via events. And, you can still use CSS3 transitions; D3 does not replace the browser's toolbox, but exposes it in a way that is easier to use.

通过仅修改实际更改的属性，D3可降低开销，并在高帧速率下实现更高的图形复杂性。 D3还允许通过事件对复杂转换进行排序。并且，您仍然可以使用CSS3过渡; D3不会取代浏览器的工具箱，但会以更易于使用的方式公开它。

Want to learn more? Read

想了解更多？读 these tutorials .

.

查看英文原文

查看更多文章

公众号:银河系1号

公众号:银河系1号

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

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

(未经同意，请勿转载)

(未经同意，请勿转载)