如何删除或替换SVG内容?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that each time I click on the update button, it generates a new svg, so I want to remove the old one or update its content.

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

Here is a snippet from the JavaScript function where I create the svg:

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

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

How can I remove the old svg element or at least replace its content?

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

7 个解决方案

#1

226

Here is the solution:

这是解决方案:

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

This is a remove function provided by D3.js.

这是一个由D3.js提供的删除函数。

#2

105

If you want to get rid of all children,

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

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

will remove all content associated with the svg.

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

#3

Setting the id attribute when appending the svg element can also let d3 select so remove() later on this element by id :

在添加svg元素时设置id属性，也可以让d3在这个元素上按id选择删除():

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

...

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

#4

I had two charts.

我有两个图表。

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

This removed all charts.

这个删除所有图表。

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

This worked for removing the existing bar chart, but then I couldn't re-add the bar chart after

这是为了删除现有的条形图，但是之后我不能重新添加条形图。

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

Tried this. It not only let me remove the existing bar chart, but also let me re-add a new bar chart.

尝试这个。它不仅让我删除现有的条形图，还让我重新添加一个新的条形图。

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 + ')');

Not sure if this is the correct way to remove, and re-add a chart in d3. It worked in Chrome, but have not tested in IE.

不确定这是否是删除的正确方法，并在d3中重新添加一个图表。它在Chrome中工作，但没有在IE中测试过。

#5

You could also just use jQuery to remove the contents of the div that contains your svg.

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

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

#6

I am using the SVG using D3.js and i had the same issue.

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

I used this code for removing the previous svg but the linear gradient inside SVG were not coming in IE

我使用这段代码删除了之前的svg，但是svg中的线性渐变并没有出现在IE中。

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

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

then I wrote the below code to resolve the issue

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

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

here i am removing the previous g and path inside the SVG, replacing with the new one.

在这里，我删除了SVG中的前一个g和路径，并替换了新的。

Keeping my linear gradient inside SVG tags in the static content and then I called the above code, This works in IE

在静态内容中保持我的线性渐变，然后调用上面的代码，这在IE中有效。

#7

You should use append("svg:svg"), not append("svg") so that D3 makes the element with the correct 'namespace' if you're using xhtml.

您应该使用append(“svg:svg”)，而不是append(“svg”)，因此，如果使用xhtml, D3将使用正确的“名称空间”来创建元素。

#1

226