D3.js - Koleksiyonlar API'si

Bir koleksiyon, birden çok öğeyi tek bir birimde gruplayan basit bir nesnedir. Konteyner olarak da adlandırılır. Bu bölüm, koleksiyonlar API'sini ayrıntılı olarak açıklamaktadır.

API'yi Yapılandırma

API'yi aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

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

</script>

Koleksiyonlar API Yöntemleri

Koleksiyonlar API'si nesneleri, haritaları, kümeleri ve yuvaları içerir. Aşağıda en sık kullanılan koleksiyon API yöntemleri verilmiştir.

Nesneler API'si
Maps API
API'yi ayarlar
Nests API

Bu API'lerin her birini ayrıntılı olarak inceleyelim.

Nesneler API'si

Object API, önemli veri türlerinden biridir. Aşağıdaki yöntemleri destekler -

d3.keys(object) - Bu yöntem, nesne özellik anahtarlarını içerir ve özellik adlarının bir dizisini döndürür.
d3.values(object) - Bu yöntem, nesne değerlerini içerir ve bir özellik değerleri dizisi döndürür.
d3.entries(object)- Bu yöntem, belirtilen nesnenin hem anahtarlarını hem de değerlerini içeren bir dizi döndürmek için kullanılır. Her giriş, bir anahtarı ve değeri olan bir nesnedir.

Example - Aşağıdaki kodu ele alalım.

d3.entries({one: 1})

Burada anahtar bir ve değer 1'dir.

Example - Bir web sayfası oluşturun objects.html ve aşağıdaki değişiklikleri ekleyin.

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

Şimdi, tarayıcıyı isteyin ve aşağıdaki yanıtı göreceksiniz.

Maps API

Bir harita, anahtar ve değer çiftlerine dayalı değerler içerir. Her anahtar ve değer çifti bir giriş olarak bilinir. Bir Harita yalnızca benzersiz anahtarlar içerir. Öğeleri anahtara göre aramak, güncellemek veya silmek yararlıdır. Çeşitli Maps API yöntemlerini ayrıntılı olarak inceleyelim.

d3.map([object[, key]])- Bu yöntem, yeni bir harita oluşturmak için kullanılır. Nesne, tüm numaralandırılabilir özellikleri kopyalamak için kullanılır.
map.has(key) - Bu yöntem, haritanın belirtilen anahtar dizesi için bir girişi olup olmadığını kontrol etmek için kullanılır.
map.get(key) - Bu yöntem, belirtilen anahtar dizesinin değerini döndürmek için kullanılır.
map.set(key, value)- Bu yöntem, belirtilen anahtar dizesinin değerini ayarlamak için kullanılır. Harita daha önce aynı anahtar dizgisi için bir girişe sahipse, eski giriş yeni değerle değiştirilir.
map.remove(key)- Harita girişini kaldırmak için kullanılır. Anahtar belirtilmezse, yanlış döndürür.
map.clear() - Bu haritadan tüm girişleri kaldırır.
map.keys() - Bu haritadaki her giriş için bir dizi dize anahtarı döndürür.
map.values() - Bu haritadaki her giriş için bir değer dizisi döndürür.
map.entries() - Bu haritadaki her giriş için bir dizi anahtar-değer nesnesi döndürür.
(x) map.each(function) - Bu yöntem, haritadaki her giriş için belirtilen işlevi çağırmak için kullanılır.
(xi) map.empty() - Yalnızca ve ancak bu haritanın sıfır girişi varsa doğru döndürür.
(xii) map.size() - Bu haritadaki girişlerin sayısını döndürür.

Example - Bir web sayfası oluşturun maps.html ve aşağıdaki değişiklikleri ekleyin.

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

Şimdi, tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.

Benzer şekilde diğer işlemleri de gerçekleştirebilirsiniz.

API'yi ayarlar

Bir Set, yinelenen öğeler içeremeyen bir Koleksiyondur. Matematiksel küme soyutlamasını modeller. Çeşitli Sets API yöntemlerini ayrıntılı olarak inceleyelim.

d3.set([array[, accessor]])- Bu yöntem, yeni bir set oluşturmak için kullanılır. Dizi, dize değerleri eklemek için kullanılır. Erişimci isteğe bağlıdır.
set.has(value) - Bu yöntem, kümenin belirtilen değer dizesi için bir girişe sahip olup olmadığını kontrol etmek için kullanılır.
set.add(value) - Belirtilen değer dizesini sete eklemek için kullanılır.
set.remove(value) - Belirtilen değer dizesini içeren kümeyi kaldırmak için kullanılır.
set.clear() - Bu kümeden tüm değerleri kaldırır.
set.values() - Bu yöntem, kümeye bir değer dizisi döndürmek için kullanılır.
set.empty() - Yalnızca ve ancak bu kümede sıfır değerler varsa doğru döndürür.
set.size() - Bu kümedeki değerlerin sayısını döndürür.

Example - Bir web sayfası oluşturun sets.html ve aşağıdaki değişiklikleri ekleyin.

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

Şimdi, tarayıcıyı isteyin ve ekranımızda aşağıdaki yanıtı göreceğiz.

Benzer şekilde diğer işlemleri de gerçekleştirebiliriz.

Nests API

Nesting API, dizideki öğeleri içerir ve hiyerarşik bir ağaç yapısında çalışır. Çeşitli Nests API yöntemlerini ayrıntılı olarak inceleyelim.

d3.nest() - Bu yöntem, yeni bir yuva oluşturmak için kullanılır.
nest.key(key)- Bu yöntem, yeni bir tuş işlevini başlatmak için kullanılır. Bu işlev, bir girdi dizisindeki her öğeyi çağırmak ve gruptaki öğeleri döndürmek için kullanılır.
nest.sortKeys(comparator)- Bu yöntem, belirli bir karşılaştırıcıdaki anahtarları sıralamak için kullanılır. İşlev, d3. artan veya d3. artan olarak tanımlanır.
nest.sortValues(comparator)- Bu yöntem, belirli bir karşılaştırıcıdaki değerleri sıralamak için kullanılır. Karşılaştırıcı işlevi, yaprak elemanlarını sıralar.
nest.map(array)- Bu yöntem, belirtilen diziyi uygulamak ve iç içe geçmiş bir harita döndürmek için kullanılır. Döndürülen haritadaki her girdi, birinci anahtar işlevi tarafından döndürülen farklı bir anahtar değerine karşılık gelir. Giriş değeri, kayıtlı tuş işlevlerinin sayısına bağlıdır.
nest.object(array) - Bu yöntem, yuva operatörünü belirtilen diziye uygulamak ve yuvalanmış bir nesne döndürmek için kullanılır.
nest.entries(array) - Bu yöntem, yuva operatörünü belirtilen diziye uygulamak ve bir anahtar-değer girdileri dizisi döndürmek için kullanılır.

Basit bir web sayfası düşünün nest.html yukarıda tartışılan yuvalama yöntemlerini gerçekleştirmek.

Example - Şu örneği ele alalım.

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

Şimdi, sonucu bir tarayıcıda kontrol edin ve aşağıdaki sonucu göreceğiz.

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

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