AsPxh
2021-05-24 17:19
采纳率: 100%
浏览 181
已采纳

D3.js力导向图渲染数据

我的d3.js力导向图如何解决数据在首次渲染时,所有节点剧烈抖动,为什么抖动,(特别剧烈!!!

 

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

3条回答 默认 最新

  • 答题大神 2021-05-24 17:50
    最佳回答
    force.on("tick", function () {
     
        if(force.alpha()<=0.05){  // 足够稳定时,才渲染一次
     
          link.attr("x1", function (d) { return d.source.x; })
              .attr("y1", function (d) { return d.source.y; })
              .attr("x2", function (d) { return d.target.x; })
              .attr("y2", function (d) { return d.target.y; });
          node.attr("cx", function (d) { return d.x; })
              .attr("cy", function (d) { return d.y; });
     
          force.stop(); // 渲染完成后立即停止刷新
        }
    });

    阅读了一下官方文档 ,发现问题出来 tick 上。

    force.start() 后,有一个计时器不停地触发 tick 直到所有节点最终受力平衡稳定下来。

    可以理解为,有个计时器不停在打点,每打一次点需要触发一次 tick() 里的动作。而 tick() 的默认动作是重绘所有节点和连线位置。因为图形渲染需要时间长,渲染的次数又多,所以需要等很长时间,且会抖动,你将源码进行如上的修改,应该就能解决这个问题。

    评论
    解决 无用
    打赏 举报
查看更多回答(2条)

相关推荐 更多相似问题