d3.js - 替换 d3.js 图而不是每次都创建一个新图

Question

我将 d3.js 与 GWT 结合使用，每次调用用于创建饼图的 javascript 代码时，它都会附加一个新代码，而不是用新值替换旧代码。

如何更改此代码，以便在添加新代码之前删除旧代码？

var svg = d3.select(".body").append("svg")
            .attr("width", width)
            .attr("height", height)
          .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Answer 1

而不是更改您的代码，我建议您创建一次，然后使用您的数据构建您的图表并查看 d3.js 的 .enter() 和 .exit() 方法 - 所以如果您的数据发生更改，库将添加/删除一些元素。

干杯

Answer 2

只需添加

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

在删除所有 SVG 元素的代码之前。