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 объектов

Object API - один из важных типов данных. Он поддерживает следующие методы -

d3.keys(object) - Этот метод содержит ключи свойств объекта и возвращает массив имен свойств.
d3.values(object) - Этот метод содержит значения объекта и возвращает массив значений свойств.
d3.entries(object)- Этот метод используется для возврата массива, содержащего ключи и значения указанного объекта. Каждая запись - это объект с ключом и значением.

Example - Давайте рассмотрим следующий код.

d3.entries({one: 1})

Здесь ключ равен единице, а значение равно 1.

Example - Создать веб-страницу 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() - Возвращает истину тогда и только тогда, когда на этой карте нет записей.
(xii) map.size() - Возвращает количество записей на этой карте.

Example - Создать веб-страницу 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() - Возвращает истину тогда и только тогда, когда этот набор имеет нулевые значения.
set.size() - Возвращает количество значений в этом наборе.

Example - Создать веб-страницу 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 Nests.

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 для выполнения описанных выше методов вложения.

Example - Рассмотрим следующий пример.

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