如何删除或替换 SVG 内容？答案

【问题标题】：How can I remove or replace SVG content?如何删除或替换 SVG 内容？
【发布时间】：2012-06-02 18:48:20
【问题描述】：

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

这是我创建 svg 的 JavaScript 函数的 sn-p：

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

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

【问题讨论】：

github.com/mbostock/d3/wiki/Selections#wiki-remove
@Felix Kling 谢谢 :) D3.js 的删除功能解决了它 var svg1 = d3.select("svg") .remove();
你可以使用d3.select("svg").empty();
我在没有 d3 的情况下做了一些 svg，如果一个元素（在我的例子中是一个路径）的 id 为“p_1”，那么我可以做 var el = document.querySelector("#p_1") ; el.parentElement.removeChild(el);

标签： javascript ajax svg d3.js

【解决方案1】：

解决办法如下：

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

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

【讨论】：

实际上，如果您想从 svg 中删除元素，最好使用：svg.selectAll("*").remove();。即使将svg 变量设置为分组元素（g），也会清除元素的内容。
@Nux 因为你我今天准时离开。 d3.html('') 在 Safari 中不起作用。
谢谢，但是如果我删除一个图表然后立即尝试添加一个新图表，它不会被添加吗？任何建议，谢谢。
上面的代码删除了包含图表的整个 svg 元素。我猜你需要创建一个新的 svg 元素来添加一个新图表。
奇怪的是 Safari 的 bug 仍然存在。他们应该修补它。

【解决方案2】：

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

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

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

【讨论】：

如果你想更新图表，我推荐这个。删除他们的孩子，然后追加新的。
我用这个答案解决了我的问题，这个答案清除了svg标签内所有创建的内容，我可以在清除内容后更新我的图表
这是否会删除任何关联的事件侦听器，这些侦听器分配给 SVG 中的子级？

【解决方案3】：

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

【讨论】：

这是一种比选择作为答案的解决方案更安全/更清洁的解决方案。通过使用 id 选择 svg，可以避免混淆同一页面上可能存在的其他 svg 元素。请为此投票。
我过去使用过这个，这是一个精确的解决方案。添加 id 也会记录节点。

【解决方案4】：

我有两张图表。

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

【讨论】：

【解决方案5】：

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

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

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

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

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

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

当您已经在 D3 中使用一个很棒的工具来完成这项工作时，使用 jQuery 进行 DOM 操作并不是一个好主意。特别是如果您没有使用 jQuery。

【解决方案7】：

您应该使用append("svg:svg")，而不是append("svg")，以便在您使用 xhtml 时 D3 使元素具有正确的“命名空间”。

【讨论】：

【解决方案8】：

我遵循https://www.d3-graph-gallery.com/graph/line_basic.html 的代码，得到了这个代码：

svg.append("path")
  .datum(filteredData)
  .attr("fill", "none")
  .attr("stroke", "blue")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
    .x(function(k) { return x(k.date) })
    .y(function(k) { return y(k.value) })
   )

所以对我来说，结果是我在生成新行之前就打了这个：

d3.selectAll("path").remove()

【讨论】：