javascript - 如何在数据更新时更新可重用的 d3.js 图形？

Question

我重构了 d3.layout.pack 图示例 here成一个可重用的模块。现在我想在数据更新时更新图表。但是当我用新数据调用图表时，新图表会呈现在旧图表之上。您可以找到问题的演示 here .

基本上，为了模拟数据更新，我以这种方式调用带有 setinterval 的函数:

 function test(){
  d3.select('#vis')
  .datum(data2)
  .call(cluster);

 }

 setInterval(test, 1500);

您可以在文件底部找到数据更新部分。你能检查一下有什么问题吗？

Answer 1

您的代码存在一些问题。首先，由于范围问题，您检查 SVG 是否已经存在不起作用。更好的方法是选择您想要的元素并检查您的选择是否为空。

var svg = d3.select("svg > g");
if(svg.empty()){
    svg = d3.select(this).append("svg:svg").attr("width", width)
            .attr("height", height)
            .append("svg:g")
            .attr("transform", "translate(" + (width - r) / 2 + "," + (height - r) / 2 + ")");
}

请注意，我已将 g 元素的附加部分合并到此，因为这就是您正在操作的内容。

其次，除了输入选择之外，您还需要处理更新和退出选择。我已将其添加到您的 jsfiddle here .