D3.js - 集合 API

集合簡單來說就是一個將多個元素組合成一個單元的物件。它也被稱為容器。本章詳細介紹了集合 API。

配置 API

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

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

</script>

集合 API 方法

集合 API 包含物件、對映、集合和巢狀。以下是最常用的集合 API 方法。

物件 API
對映 API
集合 API
巢狀 API

讓我們詳細瞭解一下每個 API。

物件 API

物件 API 是重要的資料型別之一。它支援以下方法：

d3.keys(object) - 此方法包含物件屬性鍵，並返回一個屬性名稱陣列。
d3.values(object) - 此方法包含物件值，並返回一個屬性值陣列。
d3.entries(object) - 此方法用於返回一個包含指定物件鍵和值的陣列。每個條目都是一個包含鍵和值的object。

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

d3.entries({one: 1})

這裡，鍵是 one，值是 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

對映包含基於鍵值對的值。每個鍵值對稱為一個條目。對映僅包含唯一的鍵。它對於基於鍵搜尋、更新或刪除元素很有用。讓我們詳細瞭解各種對映 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() - 返回此對映中的條目數。

示例 - 建立一個網頁 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>

現在，請求瀏覽器，我們將看到以下響應。

同樣，您也可以執行其他操作。

集合 API

集合是一個不能包含重複元素的集合。它模擬數學集合抽象。讓我們詳細瞭解各種集合 API 方法。

d3.set([array[, accessor]]) - 此方法用於建立一個新的集合。陣列用於新增字串值。訪問器是可選的。
set.has(value) - 此方法用於檢查集合是否具有指定值字串的條目。
set.add(value) - 用於將指定值字串新增到集合。
set.remove(value) - 用於刪除包含指定值字串的集合。
set.clear() - 從此集合中刪除所有值。
set.values() - 此方法用於返回集合的值陣列。
set.empty() - 當且僅當此集合具有零個值時返回 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>

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

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

巢狀 API

巢狀 API 包含陣列中的元素，並以分層樹結構執行。讓我們詳細瞭解各種巢狀 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.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]

列印頁面