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

2018-06-21 12:42:10

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

这里是我创建svg的JavaScript函数的一个片段：

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

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

解决方案如下：

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

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

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

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

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

在追加svg元素的时候设置id属性也可以让d3在id元素后面选择这样remove（）：

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

...

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

链接地址: http://www.djcxy.com/p/60453.html