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

在文本()方法的函数用于获得映射数据的li元素。这里,D表示10第一li元素和20为第二li元素。

接下来的三个元素可以映射到任何元素,可以使用数据联接的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。

完整的代码如下-

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   

   
      <ul id="list">
         <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>
   

上面的代码的结果如下-

Made with ❤️ in Chengdu. Copyright reserved 2019-2023.

蜀ICP备20006366号-1