如何删除或替换SVG内容？

我有一段JavaScript代码，用于创建（使用D3.js）svg包含图表的元素。我想基于来自使用AJAX的Web服务的新数据来更新图表，问题是每次我单击更新按钮时，它都会生成一个新图表svg，因此我想删除旧的图表或更新其内容。

这是我创建的JavaScript函数的片段svg：

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

如何删除旧svg元素或至少替换其内容？

解决方法如下：

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

这是removeD3.js提供的功能。

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

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

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

注意：建议您在要更新图表时使用。

在附加svg元素时设置id属性也可以让d3选择，以便稍后通过id在此元素上使用remove（）：

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

...

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

我有两个图表。

<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中进行测试。

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

我使用此代码删除了以前的svg，但是IE中没有SVG内部的线性渐变

$（“＃container_div_id”）。html（“”）;

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

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

在这里，我要删除SVG内部的以前的g和路径，用新的替换。

将线性梯度保留在SVG标签内的静态内容中，然后调用上面的代码，这在IE中有效

您也可以只使用jQuery删除包含svg的div的内容。

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

如果使用xhtml append("svg:svg")，则应使用，而不是append("svg")D3使元素具有正确的“命名空间”。