1

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

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

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

 }

 setInterval(test, 1500);

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

4

1 回答 1

3

您的代码存在一些问题。首先，由于范围问题，您检查 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 中。

于 2013-10-22T13:50:47.683 回答