D3.js-データ結合

データ結合は、D3.jsのもう1つの重要な概念です。選択とともに機能し、データセット（一連の数値）に関してHTMLドキュメントを操作できます。デフォルトでは、D3.jsはそのメソッドでデータセットに最高の優先度を与え、データセットの各アイテムはHTML要素に対応します。この章では、データ結合の詳細について説明します。

データ結合とは何ですか？

データ結合により、既存のHTMLドキュメント内のデータセットに基づいて、要素（HTML要素および埋め込みSVG要素）を挿入、変更、および削除できます。デフォルトでは、データセット内の各データ項目はドキュメント内の要素（グラフィック）に対応しています。

データセットが変更されると、対応する要素も簡単に操作できます。データ結合は、データとドキュメントのグラフィック要素との間に密接な関係を作成します。データ結合により、データセットに基づく要素の操作が非常に簡単で簡単なプロセスになります。

データ結合の仕組み

データ結合の主な目的は、既存のドキュメントの要素を特定のデータセットにマップすることです。指定されたデータセットに関してドキュメントの仮想表現を作成し、仮想表現を操作するメソッドを提供します。以下に示すような単純なデータセットを考えてみましょう。

[10, 20, 30, 25, 15]

データセットには5つの項目があるため、ドキュメントの5つの要素にマップできます。セレクタの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]);

現在、ドキュメントには5つの仮想要素があります。最初の2つの仮想要素は、次に示すようにドキュメントで定義されている2つの li 要素です。

1. li - 10
2. li - 20

以下に示すように、最初の2つの 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、2番目の li 要素の場合は20を表します。

次の3つの要素は任意の要素にマップでき、データ結合の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から4番目のアイテムを削除しました。

完全なコードは次のとおりです-

<!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>

上記のコードの結果は次のようになります-

D3js-data-join

D3.js-データ結合

データ結合とは何ですか？

データ結合の仕組み

HTML

D3.jsコード

目次