如何删除或replaceSVG内容？

我有一段JavaScript代码，它创build（使用D3.js）包含图表的svg元素。 我想根据来自使用AJAX的Web服务的新数据更新图表，问题是每次点击更新button时，它会生成一个新的svg ，所以我想删除旧的或更新其内容。

这里是我创buildsvg的JavaScript函数的一个片段：

 var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); 

如何删除旧的svg元素或至lessreplace其内容？

Answer 1

这是解决scheme：

 d3.select("svg").remove(); 

这是D3.js提供的removefunction

Answer 2

如果你想摆脱所有的孩子，

 svg.selectAll("*").remove(); 

将删除与svg相关的所有内容。

Answer 3

在添加svg元素的时候设置id属性也可以让d3在id元素的后面selectremove（）

 var svg = d3.select("theParentElement").append("svg") .attr("id","the_SVG_ID") .attr("width",... ... d3.select("#the_SVG_ID").remove(); 

Answer 4

我有两个图表。

 <div id="barChart"></div> <div id="bubbleChart"></div> 

这删除了所有的图表。

 d3.select("svg").remove(); 

这工作是删除现有的条形图，但后来我不能重新添加条形图

 d3.select("#barChart").remove(); 

试了这个。 它不但让我删除现有的条形图，而且让我重新添加一个新的条形图。

 d3.select("#barChart").select("svg").remove(); var svg = d3.select('#barChart') .append('svg') .attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom) .append('g') .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); 

不知道这是否是删除的正确方法，并在d3中重新添加图表。 它在Chrome中工作，但没有在IE中testing。

Answer 5

你也可以使用jQuery去除包含你的svg的div的内容。

 $("#container_div_id").html(""); 

Answer 6

我正在使用D3.js使用SVG，而且我遇到了同样的问题。

我用这个代码去除了以前的svg，但是SVG中的线性渐变并没有进入IE

$（ “＃container_div_id”）HTML（ “”）。

然后我写下面的代码来解决这个问题

 $('container_div_id g').remove(); $('#container_div_id path').remove(); 

在这里，我将删除SVG中的前一个g和path，replace为新的。

在静态内容中保留我的线性渐变在SVG标签内，然后我调用上面的代码，这在IE中工作

Answer 7

你应该使用append("svg:svg") ，而不是append("svg")以便D3使用正确的“命名空间”来使用xhtml。