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

How to update reusable d3.js graph when data updates?

本文关键字：更新 d3 图形 js 数据      更新时间：2023-09-26

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

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

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

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

你的代码有几个问题。首先，由于范围问题，检查 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中。

相关文章：