Javascript 如何删除或替换SVG内容？

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

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

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

以下是解决方案：

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

---

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

您应该使用appendsvg:svg，而不是appendsvg，这样，如果您使用的是xhtml，D3会使元素具有正确的“名称空间”。

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

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

---

我使用的是使用D3.js的SVG，我也遇到了同样的问题

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

$container\u div\u id.html

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

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

在这里，我删除了SVG中以前的g和路径，替换为新的g和路径

---

将我的线性渐变保留在静态内容中的SVG标记内，然后调用上述代码，这在IE中起作用，在附加SVG元素时设置id属性也可以让d3选择，以便稍后按id删除此元素：

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("#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中测试。

如果你想摆脱所有的孩子

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

---

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

@Felix Kling谢谢：D3.js中的删除功能解决了它var svg1=D3.selectsvg.remove；您可以使用d3.selectsvg.empty；我在没有d3的情况下做了一些svg，如果在我的例子中给了一个元素一个id p_1，那么我可以做var el=document.querySelectorp_1；el.parentElement.removeChildel；实际上，如果要从svg中删除元素，最好使用：svg.selectAll*.remove；。即使将svg变量设置为分组元素g@Nux，也会清除元素的内容。因为你，我今天将准时离开。d3.html在Safari中不起作用。谢谢，但是如果我删除一个图表，然后立即尝试添加一个新图表，它不会被添加吗？任何建议，谢谢。上面的代码删除了包含图表的整个svg元素。我想您需要创建一个新的svg元素来添加一个新的图表。奇怪的是Safari bug仍然存在。他们应该对此进行修补。这是一个比选择作为答案的解决方案更安全/更清洁的解决方案。通过使用id选择svg，可以避免弄乱同一页面上可能存在的其他svg元素。请投票。我过去用过这个，这是一个精确的解决方案。添加一个id也会记录节点。在D3中使用jQuery进行DOM操作不是一个好主意。特别是如果您没有使用jQuery，我建议您更新图表。删除它们的子对象，然后附加新的子对象。我使用此答案解决了我的问题，此答案清除了svg标记中创建的所有内容，并且我可以在清除内容后更新图表。是否删除分配给svg中的子对象的任何关联事件侦听器？

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

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