我正在处理一个气泡图，并且已经将“点击事件”绑定到每个圆圈上。当单击一个圆圈时，气泡图将被替换为一张表示更详细信息的新图表。
以下是代码的一部分：
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对象已经从其初始状态改变，特别是一些属性（如baseURI、clientHeight、clientWidth等）不再设置，即使在最初创建svg对象时也是如此。以下是我创建svg对象的代码：
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
我的问题是为什么新图形没有出现？这是因为svg对象的属性已经改变了吗？为了使新图形成功可视化，我应该在点击函数中做出哪些改变？
谢谢！