D3.js Element Biçimlendirme

D3, d3.select() veya d3.selectAll() kullanarak öğeleri seçtikten sonra kullanabileceğiniz aşağıdaki DOM manipülasyon yöntemlerini içerir.

Fonksiyon Açıklama
text(‘content’) Seçili öğenin metnini alır veya ekler
append(‘element name’) Seçilen öğenin içine, en sona bir öğe ekler.
insert(‘element name’) Seçilen öğeye yeni bir öğe ekler
remove() Belirtilen öğeyi DOM’dan kaldırır
html(‘content’) Seçili öğenin içindeki HTML kodunu alır veya ekler
attr(‘name’, ‘value’) Seçili öğedeki bir niteliği alır veya ekler.
property(‘name’, ‘value’) Seçili öğedeki bir niteliği alır veya ekler.
style(‘name’, ‘value’) Seçili öğenin stilini alır veya ekler
classed(‘css class’, bool) Bir css sınıfını seçimden alır, ekler veya kaldırır

Örnek:

<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div>
    </div>
    <p></p>
    <script>
      d3.select('div')
        .append('h1')
        .text('Başlık Yazısı.')
        .attr('title', 'Başlık Yazısı')
        .style('color', 'red')
    </script>
</body>
</html>

Yukarıdaki fonksiyonları kullanırken bazı durumlarda farklı davranmaları gerekebilir. Örneğin kullandığınız veride kişi bilgileri olduğunu düşünelim ve kişi erkek ise element rengi mavi, kadın ise kırmızı yapmak isteyelim.
Bu durumda fonksiyonların değer parametresine 2 parametre alan bir fonksiyon ekleyerek buna karar verilebilir. Birinci paramtre eklediğiniz veriye, ikinci parametre ise verinin sırasını (index) verir.

<!doctype html>
<html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <div id="kisiler">
  </div>

  <script>
    const kisiler = [
      {ad: 'ahmet', c: 'Erkek'},
      {ad: 'ayşe', c: 'Kadın'},
      {ad: 'burak', c: 'Erkek'},
      {ad: 'ebru', c: 'Kadın'},
    ]
    d3.select('#kisiler').selectAll('span')
      .data(kisiler)
      .enter()
      .append('span')
      .text((d, i) => d.ad)
      .style('color', (d, i) => d.c === 'Erkek' ? 'blue' : 'red');
  </script>
</body>
</html>

Fonksiyonları kullanırken doğrudan elemente ulaşmak için fonksiyon içinde this kullanarak direk DOM elementine ulaşabilirsiniz. Dikkat edilmesi gereken yukarıdaki gibi arrow fonksiyon kullanıldığınıda this kullanamazsınız bunun yerine normal function ifadesi kullanmanız gerekir.

https://www.manning.com/books/d3js-in-action-second-edition