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.org/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.