D3.js - Collection API

Kolekcja to po prostu obiekt, który grupuje wiele elementów w jedną jednostkę. Jest również nazywany pojemnikiem. W tym rozdziale opisano szczegółowo interfejs API kolekcji.

Konfigurowanie API

Możesz skonfigurować interfejs API za pomocą następującego skryptu.

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

</script>

Metody interfejsu API kolekcji

Kolekcje API zawiera obiekty, mapy, zbiory i gniazda. Poniżej przedstawiono najczęściej używane metody API kolekcji.

Objects API
Maps API
Ustawia API
Nests API

Przyjrzyjmy się szczegółowo każdemu z tych interfejsów API.

Objects API

API obiektowe jest jednym z ważnych typów danych. Obsługuje następujące metody -

d3.keys(object) - Ta metoda zawiera klucze właściwości obiektu i zwraca tablicę nazw właściwości.
d3.values(object) - Ta metoda zawiera wartości obiektu i zwraca tablicę wartości właściwości.
d3.entries(object)- Ta metoda służy do zwracania tablicy zawierającej klucze i wartości określonego obiektu. Każdy wpis jest obiektem z kluczem i wartością.

Example - Rozważmy następujący kod.

d3.entries({one: 1})

Tutaj klucz to jeden, a wartość to 1.

Example - Utwórz stronę internetową objects.html i dodaj do niego następujące zmiany.

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

Teraz poproś przeglądarkę, a zobaczysz następującą odpowiedź.

Maps API

Mapa zawiera wartości oparte na parach klucza i wartości. Każda para klucz i wartość jest nazywana pozycją. Mapa zawiera tylko unikalne klucze. Przydatne jest wyszukiwanie, aktualizowanie lub usuwanie elementów na podstawie klucza. Przyjrzyjmy się szczegółowo różnym metodom interfejsu API Map Google.

d3.map([object[, key]])- Ta metoda służy do tworzenia nowej mapy. Obiekt służy do kopiowania wszystkich wyliczalnych właściwości.
map.has(key) - Ta metoda służy do sprawdzania, czy mapa zawiera wpis dla określonego ciągu kluczy.
map.get(key) - Ta metoda służy do zwracania wartości określonego ciągu klucza.
map.set(key, value)- Ta metoda służy do ustawiania wartości określonego ciągu klucza. Jeśli mapa miała wcześniej wpis dla tego samego ciągu klucza, stary wpis jest zastępowany nową wartością.
map.remove(key)- Służy do usuwania wpisu mapy. Jeśli klucz nie zostanie określony, zwraca wartość false.
map.clear() - Usuwa wszystkie wpisy z tej mapy.
map.keys() - Zwraca tablicę kluczy łańcuchowych dla każdego wpisu w tej mapie.
map.values() - Zwraca tablicę wartości dla każdego wpisu w tej mapie.
map.entries() - Zwraca tablicę obiektów klucz-wartość dla każdego wpisu w tej mapie.
(x) map.each(function) - Ta metoda służy do wywoływania określonej funkcji dla każdego wpisu na mapie.
(xi) map.empty() - Zwraca prawdę wtedy i tylko wtedy, gdy ta mapa ma zero wpisów.
(xii) map.size() - Zwraca liczbę wpisów na tej mapie.

Example - Utwórz stronę internetową maps.html i dodaj do niego następujące zmiany.

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

Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź.

Podobnie możesz wykonywać inne operacje.

Ustawia API

Zestaw to kolekcja, która nie może zawierać zduplikowanych elementów. Modeluje matematyczną abstrakcję zbioru. Przyjrzyjmy się szczegółowo różnym metodom Sets API.

d3.set([array[, accessor]])- Ta metoda służy do tworzenia nowego zestawu. Tablica służy do dodawania wartości ciągów. Akcesor jest opcjonalny.
set.has(value) - Ta metoda służy do sprawdzania, czy zestaw zawiera wpis dla określonego ciągu wartości.
set.add(value) - Służy do dodawania określonego ciągu wartości do zestawu.
set.remove(value) - Służy do usuwania zestawu zawierającego określony ciąg wartości.
set.clear() - usuwa wszystkie wartości z tego zestawu.
set.values() - Ta metoda służy do zwracania tablicy wartości do zestawu.
set.empty() - Zwraca prawdę wtedy i tylko wtedy, gdy ten zestaw ma wartości zerowe.
set.size() - Zwraca liczbę wartości w tym zestawie.

Example - Utwórz stronę internetową sets.html i dodaj do niego następujące zmiany.

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

Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź na naszym ekranie.

Podobnie możemy wykonywać inne operacje.

Nests API

Zagnieżdżanie API zawiera elementy w tablicy i działa w hierarchicznej strukturze drzewa. Przyjrzyjmy się szczegółowo różnym metodom interfejsu Nests API.

d3.nest() - Ta metoda służy do tworzenia nowego gniazda.
nest.key(key)- Ta metoda służy do inicjowania nowej funkcji klawisza. Ta funkcja służy do wywoływania każdego elementu w tablicy wejściowej i zwracania elementów w grupie.
nest.sortKeys(comparator)- Ta metoda służy do sortowania kluczy w określonym komparatorze. Funkcja jest zdefiniowana jako d3. Rosnąco lub d3. Malejąco.
nest.sortValues(comparator)- Ta metoda służy do sortowania wartości w określonym komparatorze. Funkcja komparatora sortuje elementy liści.
nest.map(array)- Ta metoda służy do stosowania określonej tablicy i zwracania zagnieżdżonej mapy. Każdy wpis w zwróconej mapie odpowiada odrębnej wartości klucza zwróconej przez pierwszą funkcję klucza. Wartość wpisu zależy od liczby zarejestrowanych funkcji klawiszy.
nest.object(array) - Ta metoda służy do zastosowania operatora zagnieżdżania do określonej tablicy i zwrócenia zagnieżdżonego obiektu.
nest.entries(array) - Ta metoda służy do zastosowania operatora zagnieżdżania do określonej tablicy i zwrócenia tablicy wpisów klucz-wartość.

Rozważ prostą stronę internetową nest.html wykonać wyżej omówione metody zagnieżdżania.

Example - Rozważmy następujący przykład.

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

Teraz sprawdź wynik w przeglądarce, a zobaczymy następujący wynik.

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

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