Question

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

以下是我在JavaScript函数中创建svg：

的代码段

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

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

Answer 1

以下是解决方案：

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

这是D3.js提供的remove功能。

Answer 2

如果你想摆脱所有孩子，

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

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

注意：如果您想要更新图表，建议使用此选项。

Answer 3

在附加svg元素时设置id属性也可以让d3选择，以便稍后通过id在这个元素上删除（）：

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

...

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

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

Answer 5

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

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

Answer 6

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

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

$（ “＃container_div_id”）的HTML（ “”）;

然后我编写了以下代码来解决问题

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

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

将我的线性渐变保留在静态内容中的SVG标记内，然后我调用上面的代码，这适用于IE

Answer 7

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

Answer 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()

如何删除或替换SVG内容？

8 个答案: