Bir kabarcık grafiği üzerinde çalışıyorum ve her bir çevreye bir tıklama olayı ekledim. Bir daireye tıklandığında, kabarcık grafiği daha ayrıntılı bir bilgiyi temsil eden yeni bir grafikle değiştirilecektir.Tıklama etkinliğinde D3 SVG nesnesine erişme
İşte kod parçasıdır: Bir dairenin içine tıkladığımda
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return scaleX(d[2]);
})
.attr("cy", function(d) {
return scaleY(100 - d[1]);
})
.attr("r", function(d) {
return d[1];
})
.attr("fill", "#4eb157")
.attr("stroke", "#00c4d4")
.attr("stroke-width", function(d) {
return d[1]*(1-d[2]/100)*1.5;
})
.on("click", function()
{
svg.selectAll("circle")
.data(new_dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return scaleX(d[2]);
})
.attr("cy", function(d) {
return scaleY(100 - d[1]);
})
.attr("r", function(d) {
return d[1];
})
.attr("fill", "#4eb157")
.attr("stroke", "#00c4d4")
.attr("stroke-width", function(d) {
return d[1]*(1-d[2]/100)*1.5;
});
svg.selectAll("text")
.data(new_dataset)
.enter()
.append("text")
.text(function(d) {
return d[0];
})
.attr("x", function(d) {
return scaleX(d[2]);
})
.attr("y", function(d) {
return scaleY(100 - d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
});
sorun gelir, tüm grafik kaybolur, ancak yeni grafik görüntülenmiştir. Ben on tıklama işlevi yürütme sırasında, svg nesnesi ilk durumundan değişti ve özellikle başlangıçta svg oluştururken olsa bile baseURI, clientHeight, clientWidth vb gibi bazı özelliklerin artık ayarlanmış olduğunu anladım nesne.
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
Sorum neden yeni grafik görünmüyor edilir: İşte kod hangi ı svg nesnesi oluşturma edilir? Bu svg nesnesinin değişen özellikleri nedeniyle mi? Yeni grafiğin başarılı bir şekilde görselleştirilmesi için on tıklama işlevinde neleri değiştirmeliyim?
Teşekkürler!