刪除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");
}