我有一段JavaScript代码，它创建(使用D3.js)一个svg元素，其中包含一个图表。我想使用AJAX根据来自web服务的新数据更新图表，问题是每次单击更新按钮时，它都会生成一个新的svg，所以我想删除旧的或更新其内容。
下面是我创建svg的JavaScript函数的一个片段:
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
如何删除旧的svg元素或至少替换其内容?
当前回答
我遵循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()
其他回答
我有两张图表。
<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中测试。
我遵循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元素时设置id属性也可以让d3在稍后的元素中通过id选择remove():
var svg = d3.select("theParentElement").append("svg")
.attr("id","the_SVG_ID")
.attr("width",...
...
d3.select("#the_SVG_ID").remove();
下面是解决方案:
d3.select("svg").remove();
这是D3.js提供的remove函数。
你应该使用append("svg:svg")，而不是append("svg")，这样如果你使用xhtml, D3会使元素具有正确的“名称空间”。
