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