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

力导向图布局

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

通过fixed属性来固定节点

上面作者的demo(d3.js v4)。

• 节点之间的相互作用力的存在 所以节点不能重合，然后节点拖拽的过程中会影响到其他的节点

• 拖拽的过程 节点之间的线段长度不变，会会弹回去

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

找了个作者的demo

d.fixed = true;

一开始没有仔细看v4版本的API 想当然以为也是这样去做的，尝试了好久没成功。

To fix a node in a given position, you may specify two additional properties:

fx - the node’s fixed x-position

fy - the node’s fixed y-position

At the end of each tick, after the application of any forces, a node with a defined node.fx has node.x reset to this value and node.vx set to zero; likewise, a node with a defined node.fy has node.y reset to this value and node.vy set to zero. To unfix a node that was previously fixed, set node.fx and node.fy to null, or delete these properties.

v4版本

其他

D3.js 3.x和4.x版本api改动真心大，也没有很多相关资料，还是要多看api吧