如何删除或替换SVG内容?

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

下面是我创建svg的JavaScript函数的一个片段:

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

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

当前回答

我使用SVG使用D3.js和我有同样的问题。

我使用这段代码来删除之前的svg，但svg内部的线性渐变在IE中没有出现

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

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

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

在这里，我删除了之前的g和路径内的SVG，替换为新的。

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

其他回答

如果你想摆脱所有孩子，

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

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

下面是解决方案:

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

这是D3.js提供的remove函数。

你应该使用append("svg:svg")，而不是append("svg")，这样如果你使用xhtml, D3会使元素具有正确的“名称空间”。

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

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

在添加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();

推荐文章