पर डी 3 एसवीजी ऑब्जेक्ट एक्सेस करना मैं एक बबल ग्राफ पर काम कर रहा हूं और मैंने प्रत्येक सर्किल पर एक क्लिक ईवेंट संलग्न किया है। किसी सर्कल पर क्लिक करते समय, बबल ग्राफ़ को एक नए ग्राफ के साथ प्रतिस्थापित किया जाएगा जो अधिक विस्तृत जानकारी का प्रतिनिधित्व करता है।क्लिक ईवेंट
यहाँ कोड का हिस्सा है:
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");
});
समस्या जब मैं सर्कल पर क्लिक आता है, पूरे ग्राफ गायब हो जाता है, लेकिन कोई नया ग्राफ कल्पना है। मुझे पता चला कि क्लिक फ़ंक्शन के निष्पादन के दौरान, एसवीजी ऑब्जेक्ट अपनी शुरुआती स्थिति से बदल गया है और विशेष रूप से बेसूरि, क्लाइंटहाइट, क्लाइंटविड्थ इत्यादि जैसे कुछ गुण सेट नहीं किए गए हैं, भले ही वे शुरुआत में svg बना रहे हों वस्तु। यहां कोड है जिसके साथ मैं svg ऑब्जेक्ट बना रहा हूं:
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
मेरा प्रश्न यह है कि नया ग्राफ क्यों नहीं दिख रहा है? क्या यह svg ऑब्जेक्ट के बदले गुणों के कारण है? नए ग्राफ को सफलतापूर्वक विज़ुअलाइज़ करने के लिए मुझे क्लिक फ़ंक्शन में क्या बदलना चाहिए?
धन्यवाद!