微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

D3 强制布局逐步更新

如何解决D3 强制布局逐步更新

我已经修改D3 force layout example 并通过在计时器上加载(缓慢更改)数据使其动态

      var inter = setInterval(function() {
        d3.json("http://localhost:5000/my_data",drawGraph);
      },5000);

这一切正常,但每 5 秒从起始位置重新绘制图形,这在视觉上会分散注意力。实际上,从一次迭代到下一次迭代几乎没有变化,我希望图表从其先前的位置开始重新布置。显然,当添加一个节点时,图形布局会发生变化;但我希望尽量减少视觉干扰,因为添加一个节点不应该在图中引起这么多的移动。

我该怎么做?

我尝试保存并重新加载图形节点的位置,但这没有任何作用。我应该保存并重新加载代表节点的 SVG 对象的位置吗? (在我的情况下:圆圈。) 或者我可以设置模拟开始移动节点的初始位置吗?

  // Load the positions of the nodes,assuming they are available at this point
  graph.nodes.forEach(function(o,i) {
    if (nodePos.has(o.id)) {
      o.x = nodePos.get(o.id).x
      o.y = nodePos.get(o.id).y
      console.log("< node " + o.id + ":" + o.x + "," + o.y)
    }
  });

  // Compute the layout
  var layout = d3.layout.force() // ... code omitted
  drawLinks(graph.links);
  drawNodes(graph.nodes);
  
  // ...

  // Save the positions of the nodes,assuming they are final at this point
  graph.nodes.forEach(function(o,i) {
        nodePos.set(o.id,{'x': o.x,'y': o.y});
        console.log("> node " + o.id + ":" + o.x + "," + o.y)
      });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。