D3.js-コレクションAPI

コレクションは、複数の要素を単一のユニットにグループ化する単なるオブジェクトです。コンテナとも呼ばれます。この章では、コレクションAPIについて詳しく説明します。

APIの構成

次のスクリプトを使用してAPIを構成できます。

<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script>

</script>

コレクションAPIメソッド

コレクションAPIには、オブジェクト、マップ、セット、およびネストが含まれています。以下は、最も一般的に使用されるコレクションAPIメソッドです。

オブジェクトAPI
Maps API
APIを設定します
Nests API

これらの各APIについて詳しく説明します。

オブジェクトAPI

オブジェクトAPIは重要なデータ型の1つです。それは次の方法をサポートしています-

* d3.keys（object）*-このメソッドにはオブジェクトプロパティキーが含まれ、プロパティ名の配列を返します。
* d3.values（object）*-このメソッドはオブジェクト値を含み、プロパティ値の配列を返します。
* d3.entries（object）*-このメソッドは、指定されたオブジェクトのキーと値の両方を含む配列を返すために使用されます。各エントリは、キーと値を持つオブジェクトです。

例-次のコードを考えてみましょう。

d3.entries({one: 1})

ここで、キーは1、値は1です。

例-Webページ objectsl を作成し、以下の変更を追加します。

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
         console.log(d3.keys(month));
         console.log(d3.values(month));
         console.log(d3.entries(month));
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の応答が表示されます。

コレクションAPI

Maps API

マップには、キーと値のペアに基づいた値が含まれます。各キーと値のペアはエントリと呼ばれます。マップには一意のキーのみが含まれます。キーに基づいて要素を検索、更新、または削除すると便利です。さまざまなMaps APIメソッドを詳しく見ていきましょう。

* d3.map（[object [、key]]）*-このメソッドは、新しいマップを作成するために使用されます。オブジェクトは、列挙可能なすべてのプロパティをコピーするために使用されます。
* map.has（key）*-このメソッドは、マップに指定されたキー文字列のエントリがあるかどうかを確認するために使用されます。
* map.get（key）*-このメソッドは、指定されたキー文字列の値を返すために使用されます。
* map.set（key、value）*-このメソッドは、指定されたキー文字列の値を設定するために使用されます。マップに以前に同じキー文字列のエントリがあった場合、古いエントリは新しい値に置き換えられます。
* map.remove（key）*-マップエントリを削除するために使用されます。キーが指定されていない場合、falseを返します。
* map.clear（）*-このマップからすべてのエントリを削除します。
* map.keys（）*-このマップ内のすべてのエントリの文字列キーの配列を返します。
* map.values（）*-このマップのすべてのエントリの値の配列を返します。
* map.entries（）*-このマップの各エントリのキー値オブジェクトの配列を返します。
（x）map.each（function）-このメソッドは、マップ内の各エントリに対して指定された関数を呼び出すために使用されます。
（xi）map.empty（）-このマップにエントリがゼロの場合にのみtrueを返します。
（xii）map.size（）-このマップのエントリの数を返します。

例-Webページ mapsl を作成し、以下の変更を加えます。

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = d3.map([{name: "jan"}, {name: "feb"}],
            function(d) { return d.name; });
         console.log(month.get("jan"));//{"name": "jan"}
         console.log(month.get("apr"));//undefined
         console.log(month.has("feb"));//true

         var map =  d3.map().set("fruit", "mango");
         console.log(map.get("fruit"));//mango
         console.log(map.remove("fruit"));//remove key and return true.
         console.log(map.size());   //size is 0 because key removed.
         console.log(map.empty());  //true
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

Map API

同様に、他の操作も実行できます。

APIを設定します

セットは、重複した要素を含むことのできないコレクションです。数学的な集合の抽象化をモデル化します。さまざまなSets APIメソッドを詳しく見ていきましょう。

* d3.set（[array [、accessor]]）*-このメソッドは、新しいセットを作成するために使用されます。配列は、文字列値を追加するために使用されます。アクセサーはオプションです。
* set.has（value）*-このメソッドは、指定された値文字列のエントリがセットにあるかどうかを確認するために使用されます。
* set.add（value）*-指定された値文字列をセットに追加するために使用されます。
* set.remove（value）*-指定された値文字列を含むセットを削除するために使用されます。
* set.clear（）*-このセットからすべての値を削除します。
* set.values（）*-このメソッドは、値の配列をセットに返すために使用されます。
* set.empty（）*-このセットにゼロ値がある場合にのみtrueを返します。
* set.size（）*-このセットの値の数を返します。

例-Webページ setsl を作成し、以下の変更を追加します。

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var fruits =  d3.set().add("mango")
          .add("apple").add("orange");
         console.log(fruits.has("grapes"));//return false.
         console.log(fruits.remove("apple"));//true
         console.log(fruits.size());   //size is 2
         console.log(fruits.empty());  //true
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、画面に次の応答が表示されます。

Sets API

同様に、他の操作も実行できます。

Nests API

ネストAPIには配列の要素が含まれ、階層ツリー構造で実行されます。さまざまなNests APIメソッドを詳しく見ていきましょう。

* d3.nest（）*-このメソッドは、新しいネストを作成するために使用されます。
* nest.key（key）*-このメソッドは、新しいキー機能を初期化するために使用されます。この関数は、入力配列内の各要素を呼び出し、グループ内の要素を返すために使用されます。
* nest.sortKeys（comparator）*-このメソッドは、指定されたコンパレータでキーをソートするために使用されます。関数はd3.ascendingまたはd3.descendingとして定義されています。
* nest.sortValues（comparator）*-このメソッドは、指定されたコンパレータで値をソートするために使用されます。コンパレータ関数は、リーフ要素をソートします。
* nest.map（array）*-このメソッドは、指定された配列を適用し、ネストされたマップを返すために使用されます。返されるマップの各エントリは、最初のキー関数によって返される個別のキー値に対応します。入力値は、登録されているキー機能の数に依存します。
* nest.object（array）*-このメソッドは、指定された配列にネスト演算子を適用し、ネストされたオブジェクトを返すために使用されます。
* nest.entries（array）*-このメソッドは、指定された配列にネスト演算子を適用し、キーと値のエントリの配列を返すために使用されます。

上記のネスト方法を実行するための単純なWebページ nestl について考えます。

例-次の例を考えてみましょう。

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 Nest API</h3>
      <script>
         var data = [
            {
               "color" : "red",
               "key" : 1
            },
            {
               "color" : "green",
               "key" : 2
            },
            {
               "color" : "blue",
               "key" : 75
            }
         ]
         var nest =  d3.nest()
            .key(function (d) { return d.color; })
            .entries(data)console.log(nest);
         var filter = nest.filter(function (d) { return d.key = = = 'red' })
         console.log(filter);
      </script>
   </body>
</html>

ブラウザで結果を確認すると、次の結果が表示されます。

Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]

Array[1]
0: Object
length: 1
__proto__: Array[0]

D3js-collections-api