D3.js 力导向图来处理拓扑图

最新推荐文章于 2024-06-12 17:13:26 发布

?Briella

最新推荐文章于 2024-06-12 17:13:26 发布

阅读量1k

点赞数

文章标签：前端 ViewUI

原文链接：https://segmentfault.com/a/1190000007313560

版权

本文探讨如何在D3.js 4.0中利用力导向图布局创建拓扑图，以及解决固定节点和拖拽时保持链路长度不变的问题。通过分析D3.js的API，特别是fixed属性的使用，展示了如何在节点拖动时不影响其他节点的位置，并调整链路长度。

摘要由CSDN通过智能技术生成

记录一点碰到的问题和解决方案。感觉国内关于D3.js 4.0版本的相关资料还是少。

D3一种布局的方式，可以将你nodes links的节点数据转换成可以绘制的坐标点数据，然后通过svg展现出来，画拓扑图中用到。

上面作者的demo(d3.js v4)。
力导向图的几个特征

但是对于拓扑图来说，这两点会有问题，并不需要这样的体验，简单来说，节点固定后，拖拽不影响其他节点的位置，节点拖拽链路长度要变动。

找了个作者的demo
sticky force layout
这是D3.js v3版本的实现方法
主要方法就是将节点数据

d.fixed = true;

一开始没有仔细看v4版本的API 想当然以为也是这样去做的，尝试了好久没成功。
v4版本的api对fixed节点的规定是如果节点数据(d) 有fx fy两个值不为null，那么就是固定节点，unfix固定节点的方法就是设置fx fy=null。

关注