我有一段JavaScript代码，它创建(使用D3.js)一个svg元素，其中包含一个图表。我想使用AJAX根据来自web服务的新数据更新图表，问题是每次单击更新按钮时，它都会生成一个新的svg，所以我想删除旧的或更新其内容。
下面是我创建svg的JavaScript函数的一个片段:
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
如何删除旧的svg元素或至少替换其内容?
当前回答
你应该使用append("svg:svg")，而不是append("svg")，这样如果你使用xhtml, D3会使元素具有正确的“名称空间”。
其他回答
你应该使用append("svg:svg")，而不是append("svg")，这样如果你使用xhtml, D3会使元素具有正确的“名称空间”。
我遵循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()
下面是解决方案:
d3.select("svg").remove();
这是D3.js提供的remove函数。
我使用SVG使用D3.js和我有同样的问题。
我使用这段代码来删除之前的svg，但svg内部的线性渐变在IE中没有出现
$ (" # container_div_id ") . html (" ");
然后我写了下面的代码来解决这个问题
$('container_div_id g').remove();
$('#container_div_id path').remove();
在这里，我删除了之前的g和路径内的SVG，替换为新的。
在静态内容中保持SVG标签内的线性梯度，然后我调用上面的代码，这在IE中工作
如果你想摆脱所有孩子，
svg.selectAll("*").remove();
将删除与svg. xml相关的所有内容。
