D3.js - Veri Birleştirme
Veri birleştirme D3.js'deki bir başka önemli kavramdır. Seçimlerle birlikte çalışır ve HTML belgesini veri setimize (bir dizi sayısal değer) göre değiştirmemizi sağlar. Varsayılan olarak D3.js, veri kümesine yöntemlerinde en yüksek önceliği verir ve veri kümesindeki her öğe bir HTML öğesine karşılık gelir. Bu bölüm, veri birleştirmelerini ayrıntılı olarak açıklamaktadır.
Veri Birleştirme nedir?
Veri birleştirme, mevcut HTML belgesindeki veri kümesine dayalı olarak öğeleri (HTML öğesi ve gömülü SVG öğeleri) enjekte etmemize, değiştirmemize ve kaldırmamıza olanak tanır. Varsayılan olarak, veri kümesindeki her veri öğesi belgedeki bir öğeye (grafiksel) karşılık gelir.
Veri seti değiştikçe, karşılık gelen eleman da kolaylıkla değiştirilebilir. Veri birleştirme, verilerimiz ile belgenin grafik öğeleri arasında yakın bir ilişki oluşturur. Veri birleştirme, veri kümesine dayalı olarak öğelerin işlenmesini çok basit ve kolay bir işlem haline getirir.
Veri Birleştirme Nasıl Çalışır?
Veri birleştirmenin birincil amacı, mevcut belgenin öğelerini verilen veri kümesiyle eşlemektir. Verilen veri setine göre belgenin sanal bir temsilini oluşturur ve sanal temsil ile çalışmak için yöntemler sağlar. Aşağıda gösterildiği gibi basit bir veri seti düşünelim.
[10, 20, 30, 25, 15]Veri setinin beş öğesi vardır ve bu nedenle belgenin beş öğesi ile eşleştirilebilir. Şununla eşleyelim:li seçicinin selectAll () yöntemini ve data join'in data () yöntemini kullanan aşağıdaki belgenin öğesi.
HTML
<ul id = "list">
<li><li>
<li></li>
</ul>D3.js kodu
d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);Şimdi, belgede beş sanal öğe var. İlk iki sanal öğe,li aşağıda gösterildiği gibi belgede tanımlanan öğe.
1. li - 10
2. li - 20Seçicinin tüm eleman değiştirme yöntemlerini kullanabiliriz. attr(), style(), text(), vb., ilk ikisi için li Aşağıda gösterildiği gibi.
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return d; });Text () yöntemindeki işlev, liöğeler verileri eşledi. Buraya,d ilk olarak 10'u temsil eder li element ve 20 saniye li öğesi.
Sonraki üç öğe herhangi bir öğeye eşlenebilir ve veri join'in enter () ve seçicinin append () yöntemi kullanılarak yapılabilir. Enter () yöntemi, kalan verilere (mevcut öğelerle eşlenmeyen) erişim sağlar ve append () yöntemi, karşılık gelen verilerden yeni bir öğe oluşturmak için kullanılır. Yaratalımlikalan veri öğeleri için de. Veri haritası aşağıdaki gibidir -
3. li - 30
4. li - 25
5. li - 15Yeni bir li öğesi oluşturma kodu aşağıdaki gibidir -
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });Veri birleştirme, exit() method aşağıda gösterildiği gibi veri kümesinden dinamik olarak çıkarılan veri öğelerini işlemek için.
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()Burada, veri kümesinden dördüncü öğeyi ve buna karşılık gelen li öğesini exit () ve remove () yöntemlerini kullanarak kaldırdık.
Kodun tamamı aşağıdaki gibidir -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<ul id = "list">
<li></li>
<li></li>
</ul>
<input type = "button" name = "remove" value = "Remove fourth value"
onclick = "javascript:remove()" />
<script>
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d)
{ return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
</script>
</body>
</html>Yukarıdaki kodun sonucu aşağıdaki gibi olacaktır -