删除d3 svg元素以进行重绘

Question

我希望你能帮助我，因为这让我疯了！

所以我试图用d3重绘一个svg。 在我的代码中，我使用以下命令添加svg：

d3.xml("Images/vertical_line.svg", "image/svg+xml", function(xml) {

  var importedNode = document.importNode(xml.documentElement, true);
  var svg = d3.select('#'+id+'_verticallinecontainer').node().appendChild(importedNode);

  });

当我的更新函数被调用时，我继续删除元素：

d3.select("#"+id+'_verticallinecontainer').remove();

这将删除容器和元素。 然后我继续使用上面的代码重新绘制svg。

我的问题是，当它再次附加svg它会做两次，我不明白为什么！ 似乎d3以某种方式缓存svg，再次添加它。

希望你能帮助清除什么是错的，任何帮助将不胜感激！

Answer 1

我遇到了类似的问题。 删除SVG元素不允许我像我想要的那样完全更新数据。

相反，我使用以下行删除了在SVG内创建的g元素：

d3.selectAll("g > *").remove()

在我的updateGraph（）函数中

此处显示的完整说明和情况：重新绘制/刷新D3中的图形

Answer 2

FIDDLE快速添加，删除和添加SVG和包含的圆圈的示例。 希望这可以帮助。

function update() {
    svg.remove();
    svg = d3.selectAll("body").append("svg");
    svg.append("circle")
        .attr("cx",40)
        .attr("cy",40)
        .attr("r",20)
        .style("fill","blue");
}