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。

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

1 个答案: