Javascript 如何删除或替换 SVG 内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10784018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove or replace SVG content?
提问by Sami
I have a piece of JavaScript code which creates (using D3.js) an svgelement 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 代码，它创建（使用 D3.js）一个svg包含图表的元素。我想根据来自使用 AJAX 的 Web 服务的新数据更新图表，问题是每次单击更新按钮时，它都会生成一个新的svg，因此我想删除旧的或更新其内容。
Here is a snippet from the JavaScript function where I create the svg:
这是我创建的 JavaScript 函数的一个片段svg：
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
How can I remove the old svgelement or at least replace its content?
如何删除旧svg元素或至少替换其内容？
回答by Sami
Here is the solution:
这是解决方案：
d3.select("svg").remove();
This is a removefunction provided by D3.js.
这是removeD3.js 提供的功能。
回答by burce
If you want to get rid of all children,
如果你想摆脱所有的孩子，
svg.selectAll("*").remove();
will remove all content associated with the svg.
将删除与 svg 关联的所有内容。
Note: This is recommended in case you want to update chart.
注意：如果您想更新图表，建议这样做。
回答by burce
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 在此元素上选择 so remove() ：
var svg = d3.select("theParentElement").append("svg")
.attr("id","the_SVG_ID")
.attr("width",...
...
d3.select("#the_SVG_ID").remove();
回答by Stirling
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 中测试。
回答by cjungel
You could also just use jQuery to remove the contents of the div that contains your svg.
您也可以使用 jQuery 删除包含您的 svg 的 div 的内容。
$("#container_div_id").html("");
回答by Shailender Singh
I am using the SVG using D3.js and i had the same issue.
我正在使用 D3.js 使用 SVG，我遇到了同样的问题。
I used this code for removing the previous svg but the linear gradient inside SVG were not coming in IE
我使用此代码删除了以前的 svg，但是 IE 中没有 SVG 内部的线性渐变
$("#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
将我的线性渐变保留在静态内容中的 SVG 标签内，然后我调用了上面的代码，这在 IE 中有效
回答by Sprintstar
You should use append("svg:svg"), not append("svg")so that D3 makes the element with the correct 'namespace' if you're using xhtml.
如果您使用 xhtml append("svg:svg")，您应该使用, 而不是append("svg")让 D3 使用正确的“命名空间”制作元素。
