如何在数据更新时更新可重用的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。