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 parametre eklediğiniz veriye, ikinci parametre ise verinin sırasını (index) verir.

index.html

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

PreviousSeçiciler NextOlaylar (Events)

Last updated 5 years ago

Was this helpful?

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

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