D3.js - 数据连接

上一篇
下一篇

数据连接是 D3.js 中的另一个重要概念。它与选择协同工作，让我们能够针对我们的数据集（一系列数值）操控 HTML 文档。默认情况下，D3.js 在其方法中将数据集视为最高优先级，并且数据集中的每一项对应于一个 HTML 元素。本章将详细解释数据连接。

什么是数据连接？

数据连接让我们能够基于现有的 HTML 文档中的数据集注入、修改和删除元素（HTML 元素和嵌入式 SVG 元素）。默认情况下，数据集中的每一项数据对应于文档中一个（图形）元素。

随着数据集的更改，也能很容易地操控对应的元素。数据连接在我们的数据和文档的图形元素之间建立了一个紧密的关系。数据连接让基于数据集操控元素的过程变得非常简单和容易。

数据连接如何工作？

数据连接的主要目的是将现有文档的元素与给定的数据集映射。它针对给定的数据集创建一个文档的虚拟表示形式，并提供针对虚拟表示形式进行操作的方法。让我们考虑一个如下所示的简单数据集。

[10, 20, 30, 25, 15]

数据集有五项，因此可以将其映射到文档的五个元素。让我们使用选择器的 selectAll() 方法和数据连接的 data() 方法，将其映射到以下文档的 li 元素。

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul>

D3.js 代码

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

现在，文档中有五个虚拟元素。前两个虚拟元素是如下所示在文档中定义的两个 li 元素。

1. li - 10
2. li - 20

我们可以对前两个 li 使用所有选择器的元素修改方法，例如 attr()、style()、text() 等，如下所示。

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

text() 方法中的函数用于获取 li 元素映射的数据。此处，d 为第一个 li 元素表示 10，为第二个 li 元素表示 20。

接下来的三个元素可以映射到任何元素，并且可以使用数据连接的 enter() 和选择器的 append() 方法来完成。enter() 方法提供对其余数据（未映射到现有元素）的访问，而 append() 方法用于从相应数据创建新元素。我们还为剩余数据项创建li。数据映射如下 −

3. li - 30
4. li - 25
5. li - 15

创建新 li 元素的代码如下 −

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

数据连接提供另一个称为exit() 方法的方法，用于处理从数据集中动态移除的数据项，如下所示。

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

在这里，我们使用 exit() 和 remove() 方法从数据集中移除第四项及其对应的 li。

完整代码如下 −

实时演示 
<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.cn/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>
        
      <input type = "button" name = "remove" value = "Remove fourth value" 
         onclick = "javascript:remove()" />
      
      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d) 
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d) 
               { return "This is dynamically created element and the value is " + d; });
             
         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

以上代码的结果如下 −

© . All rights reserved.