如何删除或替换SVG内容？

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

这是removeD3.js提供的功能.

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