D3.js - Collections API

集合只是一個將多個元素組合到一個單元中的物件。它也被稱為容器。本章詳細介紹了集合 API。

配置 API

你可以使用以下指令碼配置 API。

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

</script>

集合 API 方法

Collections API 包含 object,map,sets 和 nets。以下是最常用的集合 API 方法。

  • Objects API
  • Maps API
  • Sets API
  • Nests API

讓我們詳細介紹這些 API。

Object API

Object API 是重要的資料型別之一。它支援以下方法 -

  • d3.keys(object) - 此方法包含物件屬性鍵,並返回屬性名稱的陣列。

  • d3.values(object) - 此方法包含物件值並返回屬性值陣列。

  • d3.entries(object) - 此方法用於返回包含指定物件的鍵和值的陣列。每個條目都是一個具有鍵和值的物件。

示例 - 讓我們考慮以下程式碼。

d3.entries({one: 1})

這裡,鍵是 1,值是 1。

示例 - 建立網頁 objects.html 並向其新增以下更改。

<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

map 包含基於鍵和值對的值。每個鍵和值對稱為條目。map 僅包含唯一鍵。根據金鑰搜尋,更新或刪除元素非常有用。我們將詳細介紹各種 Maps API 方法。

  • d3.map([object [,key]])- 此方法用於建立新 map。Object 用於複製所有可列舉屬性。

  • map.has(key) - 此方法用於檢查 map 是否具有指定鍵字串的條目。

  • map.get(key) - 此方法用於返回指定鍵字串的值。

  • map.set(key,value) - 此方法用於設定指定鍵字串的值。如果對映先前具有相同鍵字串的條目,則舊條目將替換為新值。

  • map.remove(key) - 用於刪除對映條目。如果未指定金鑰,則返回 false。

  • map.clear() - 刪除此地圖中的所有條目。

  • map.keys() - 返回此對映中每個條目的字串鍵陣列。

  • map.values() - 返回此對映中每個條目的值陣列。

  • map.entries() - 返回此對映中每個條目的鍵值物件陣列。

  • map.each(function) - 此方法用於為 map 中的每個條目呼叫指定的函式。

  • map.empty() - 當且僅當此對映具有零條目時返回 true。

  • map.size() - 返回此對映中的條目數。

示例 - 建立網頁 maps.html 並向其新增以下更改。

<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

同樣,你也可以執行其他操作。

SetsAPI

Set 是一個不能包含重複元素的 Collection。它模擬了數學集抽象。讓我們詳細介紹各種 Sets API 方法。

  • d3.set([array [,accessor]]) - 此方法用於建立新集。Array 用於新增字串值。訪問者是可選的。

  • set.has(value) - 此方法用於檢查集合是否具有指定值字串的條目。

  • set.add(value) - 用於將指定的值字串新增到集合中。

  • set.remove(value) - 用於刪除包含指定值字串的集合。

  • set.clear() - 從此集中刪除所有值。

  • set.values() - 此方法用於將值陣列返回到集合。

  • set.empty() - 當且僅當此 set 具有零值時返回 true。

  • set.size() - 返回此集合中的值的數量。

示例 - 建立網頁 sets.html 並向其新增以下更改。

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

現在,請求瀏覽器,我們將在螢幕上看到以下響應。

SetsAPI

同樣,我們也可以執行其他操作。

Nests API

Nests 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) - 此方法用於將 nest 運算子應用於指定的陣列並返回鍵值條目陣列。

考慮一個簡單的網頁 nest.html 來執行上面討論的巢狀方法。

示例 - 讓我們考慮以下示例。

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