Categories
D3.js教程

D3.js-数据联接

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>
   

上面的代码的结果如下-

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

The enter() method

The enter() method outputs the set of data item for which no graphic element existed before. In our list example, we have used it to create new li elements.

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

The exit() method

The exit() method outputs the set of graphic elements for which no data exists any longer. In our list example, we have used it to remove one of the li element dynamically by removing the data item in the data set.

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

Data Function

In the DOM manipulation chapter, we learned about different DOM manipulation methods in D3.js such as style(), text(), etc. Each of these functions normally takes a constant value as its parameter. Nevertheless, in the context of Data join, it takes an anonymous function as a parameter. This anonymous function takes the corresponding data and the index of the data set assigned using the data() method. So, this anonymous function will be called for each of our data values bound to the DOM. Consider the following text() function.

.text(function(d, i) {
   return d;
});

Within this function, we can apply any logic to manipulate the data. These are anonymous functions, meaning that there is no name associated with the function. Other than the data (d) and index (i) parameter, we can access the current object using this keyword as shown below −

.text(function (d, i) {
   console.log(d); // the data element
   console.log(i); // the index element
   console.log(this); // the current DOM object
   return d;
});

Consider the following example.

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

   <body>
      <p></p>
      <p></p>
      <p></p>
      <script>
         var data = [1, 2, 3];
         var paragraph = d3.select("body")
         .selectAll("p")
         .data(data)
         .text(function (d, i) {
            console.log("d: " + d);
            console.log("i: " + i);
            console.log("this: " + this);
            return "The index is " + i + " and the data is " + d;
         });
      </script>
   </body>
</html>

The above script will generate the following result −

In the above example, the parameter “d” gives you your data element, “i” gives you the index of data in the array and “this” is a reference of the current DOM element. In this case, it is the paragraph element. Notice that we have called .data(data) function above. The data() function provides data to the selected elements, in our case it is data array.

Advertisements

error: 内容受到保护 !!