D3.js - Seçim API'si

Seçimler, belge nesne modelinin (DOM) güçlü veriye dayalı dönüştürmesidir. Öznitelikleri, Stilleri, Özellikleri, HTML veya Metin İçeriğini ve daha fazlasını ayarlamak için kullanılır. Bu bölümde API seçimleri ayrıntılı olarak açıklanmaktadır.

API'yi yapılandırma

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

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

</script>

Seçim API Yöntemleri

Seçim API'sindeki en önemli yöntemler aşağıdadır.

• d3.selection()
• d3.select(selector)
• d3.selectAll(selector)
• selection.selectAll(selector)
• selection.filter(filter)
• selection.merge(other)
• d3.matcher(selector)
• d3.creator(name)
• selection.each(function)
• selection.call (işlev [, bağımsız değişkenler…])
• d3.local()
• local.set (düğüm, değer)
• local.get(node)
• local.remove(node)

Şimdi bunların her birini ayrıntılı olarak tartışalım.

d3.selection ()

Bu yöntem, kök öğeyi seçmek için kullanılır. Bu fonksiyon, seçimleri test etmek veya d3js seçimini genişletmek için de kullanılabilir.

d3.select (seçici)

Bu yöntem, belirtilen seçici dizesiyle eşleşen ilk öğeyi seçmek için kullanılır.

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

var body = d3.select("body");

Seçici bir dizge değilse, aşağıda tanımlanan belirtilen düğümü seçer.

d3.select("p").style("color", "red");

d3.selectAll (seçici)

Bu yöntem, belirtilen seçici dizesiyle eşleşen tüm öğeleri seçer.

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

var body = d3.selectAll("body");

Seçici bir dizge değilse, aşağıda tanımlanan belirtilen düğüm dizisini seçer.

d3.selectAll("body").style("color", "red");

selection.selectAll (seçici)

Bu yöntem, bir eleman seçmek için kullanılır. Belirtilen seçici dizeyle eşleşen alt öğeleri seçer. Döndürülen seçimdeki öğeler, bu seçimdeki karşılık gelen üst düğümlerine göre gruplandırılır. Geçerli öğe için belirtilen seçiciyle hiçbir öğe eşleşmezse veya seçici boşsa, geçerli dizindeki grup boş olacaktır.

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

var b = d3.selectAll("p").selectAll("b");

selection.filter (filtre)

Bu yöntem, yalnızca belirtilen filtrenin doğru olduğu öğeleri içeren yeni bir seçim döndürerek seçimi filtrelemek için kullanılır.

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

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Burada, bir dizi tablo satırını filtrelemek yalnızca tek döndürür.

selection.merge (diğer)

Bu yöntem, belirtilen diğer seçimle birleşerek yeni bir seçim döndürmek için kullanılır.

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

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (seçici)

Bu yöntem, belirtilen seçiciyi atamak için kullanılır. True döndüren bir işlev döndürür.

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

var p = selection.filter(d3.matcher("p"));

d3.creator (ad)

Bu yöntem, belirtilen eleman ismini atamak için kullanılır. Bu, ana eleman olduğunu varsayarak, verilen isimde bir eleman oluşturan bir fonksiyon döndürür.

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

selection.append(d3.creator("p"));

selection.each (işlev)

Bu yöntem, geçerli veri (d), geçerli dizin (i) ve mevcut DOM öğesi (düğümler [i ]). Aşağıda açıklanmıştır.

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (işlev [, bağımsız değişkenler…])

Belirtilen işlevi tam olarak bir kez çağırmak için kullanılır. Sözdizimi aşağıda gösterilmiştir.

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Bu yöntem aşağıda gösterildiği gibi belirtilebilir.

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local, verilerden bağımsız olan yerel durumu tanımlamanıza izin verir.

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

var data = d3.local();

Var'ın aksine, her yerelin değeri de DOM tarafından belirlenir.

local.set (düğüm, değer)

Bu yöntem, belirtilen düğümdeki bu yerelin değerini değere ayarlar.

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

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Bu yöntem, belirtilen düğümdeki bu yerelin değerini döndürür. Düğüm bu yerel değeri tanımlamazsa, onu tanımlayan en yakın atadan gelen değeri döndürür.

local.remove (düğüm)

Bu yöntem, bu yerelin değerini belirtilen düğümden siler. Düğüm tanımlanmışsa true, aksi takdirde false döndürür.