D3.js - API Koleksi

Koleksi hanyalah sebuah objek yang mengelompokkan beberapa elemen ke dalam satu unit. Ini juga disebut sebagai wadah. Bab ini menjelaskan tentang API koleksi secara detail.

Konfigurasi API

Anda dapat mengkonfigurasi API menggunakan skrip berikut.

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

</script>

Metode API Koleksi

Collections API berisi objek, peta, set, dan sarang. Berikut ini adalah metode API koleksi yang paling umum digunakan.

Objects API
Maps API
Set API
API Nests

Mari kita bahas masing-masing API ini secara mendetail.

Objects API

Object API adalah salah satu tipe data penting. Ini mendukung metode berikut -

d3.keys(object) - Metode ini berisi kunci properti objek dan mengembalikan larik nama properti.
d3.values(object) - Metode ini berisi nilai objek dan mengembalikan array nilai properti.
d3.entries(object)- Metode ini digunakan untuk mengembalikan larik yang berisi kunci dan nilai dari objek yang ditentukan. Setiap entri adalah objek dengan kunci dan nilai.

Example - Mari kita perhatikan kode berikut.

d3.entries({one: 1})

Di sini, kuncinya adalah satu dan nilainya adalah 1.

Example - Buat halaman web objects.html dan tambahkan perubahan berikut ke dalamnya.

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

Sekarang, minta browser dan Anda akan melihat respons berikut.

Maps API

Peta berisi nilai berdasarkan pasangan kunci dan nilai. Setiap pasangan kunci dan nilai dikenal sebagai entri. Peta hanya berisi kunci unik. Berguna untuk mencari, memperbarui atau menghapus elemen berdasarkan kunci. Mari kita bahas berbagai metode Maps API secara mendetail.

d3.map([object[, key]])- Metode ini digunakan untuk membuat peta baru. Objek digunakan untuk menyalin semua properti yang dapat dihitung.
map.has(key) - Metode ini digunakan untuk memeriksa apakah peta memiliki entri untuk string kunci yang ditentukan.
map.get(key) - Metode ini digunakan untuk mengembalikan nilai untuk string kunci yang ditentukan.
map.set(key, value)- Metode ini digunakan untuk menyetel nilai untuk string kunci yang ditentukan. Jika peta sebelumnya memiliki entri untuk string kunci yang sama, entri lama diganti dengan nilai baru.
map.remove(key)- Ini digunakan untuk menghapus entri peta. Jika kuncinya tidak ditentukan, itu mengembalikan salah.
map.clear() - Menghapus semua entri dari peta ini.
map.keys() - Mengembalikan array kunci string untuk setiap entri di peta ini.
map.values() - Mengembalikan larik nilai untuk setiap entri di peta ini.
map.entries() - Mengembalikan larik objek nilai kunci untuk setiap entri di peta ini.
(x) map.each(function) - Metode ini digunakan untuk memanggil fungsi yang ditentukan untuk setiap entri di peta.
(xi) map.empty() - Mengembalikan nilai true jika dan hanya jika peta ini memiliki entri nol.
(xii) map.size() - Mengembalikan jumlah entri di peta ini.

Example - Buat halaman web maps.html dan tambahkan perubahan berikut ke dalamnya.

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

Sekarang, minta browser dan kita akan melihat respons berikut.

Demikian pula, Anda juga dapat melakukan operasi lain.

Set API

Set adalah Koleksi yang tidak bisa berisi elemen duplikat. Ini memodelkan abstraksi himpunan matematika. Mari kita bahas berbagai metode Sets API secara mendetail.

d3.set([array[, accessor]])- Metode ini digunakan untuk membuat set baru. Array digunakan untuk menambahkan nilai string. Accessor adalah opsional.
set.has(value) - Metode ini digunakan untuk memeriksa apakah set memiliki entri untuk string nilai yang ditentukan.
set.add(value) - Ini digunakan untuk menambahkan string nilai yang ditentukan ke set.
set.remove(value) - Digunakan untuk menghapus set yang berisi string nilai yang ditentukan.
set.clear() - Menghapus semua nilai dari set ini.
set.values() - Metode ini digunakan untuk mengembalikan larik nilai ke set.
set.empty() - Mengembalikan nilai true jika dan hanya jika set ini memiliki nilai nol.
set.size() - Mengembalikan jumlah nilai dalam set ini.

Example - Buat halaman web sets.html dan tambahkan perubahan berikut ke dalamnya.

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

Sekarang, minta browser dan kita akan melihat respons berikut di layar kita.

Demikian pula, kami dapat melakukan operasi lain juga.

API Nests

Nesting API berisi elemen dalam larik dan bekerja dalam struktur pohon hierarki. Mari kita telusuri berbagai metode API Nests secara mendetail.

d3.nest() - Metode ini digunakan untuk membuat sarang baru.
nest.key(key)- Metode ini digunakan untuk menginisialisasi fungsi kunci baru. Fungsi ini digunakan untuk memanggil setiap elemen dalam larik input dan mengembalikan elemen dalam grup.
nest.sortKeys(comparator)- Metode ini digunakan untuk mengurutkan kunci dalam pembanding yang ditentukan. Fungsi didefinisikan sebagai d3.ascending atau d3.descending.
nest.sortValues(comparator)- Metode ini digunakan untuk mengurutkan nilai dalam pembanding yang ditentukan. Fungsi pembanding mengurutkan elemen daun.
nest.map(array)- Metode ini digunakan untuk menerapkan larik yang ditentukan dan mengembalikan peta bersarang. Setiap entri di peta yang dikembalikan sesuai dengan nilai kunci berbeda yang dikembalikan oleh fungsi kunci pertama. Nilai entri tergantung pada jumlah fungsi kunci yang terdaftar.
nest.object(array) - Metode ini digunakan untuk menerapkan operator sarang ke larik yang ditentukan dan mengembalikan objek bersarang.
nest.entries(array) - Metode ini digunakan untuk menerapkan operator sarang ke larik yang ditentukan dan mengembalikan larik entri nilai-kunci.

Pertimbangkan halaman web sederhana nest.html untuk melakukan metode sarang yang dibahas di atas.

Example - Mari kita perhatikan contoh berikut.

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

Sekarang, periksa hasilnya di browser dan kita akan melihat hasil berikut.

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

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