当使用多个连接组件时,D3强制v3和v4之间的布局差异

Question

MWEs

我尝试用两个版本创建相同的图形,这里是Bl.ocks:

• V3
• V4

这些示例改编自一个官方示例.

问题

当存在多个连接组件时会出现差异.在版本4中,有两件事对我来说不起作用:

1. 拖动一个连接的组件使其他组件以非物理方式非常非常地转换(我猜)力中心;

2. 在鼠标按下时(即使没有实际移动),其他连接的组件无限移动,最终离开屏幕.

简而言之,版本3中的图形是牢不可破的,无论您将节点弄得多少,它们最终都会返回到稳定的位置.

如何修复这两种行为,使模拟更接近版本3？

Answer 1

你不想要d3.forceCenter.如果你看看API:

定心力均匀地转换节点,使得所有节点的平均位置(如果所有节点具有相等的重量,则为质心)位于给定位置⟨x,y⟩

这意味着,当您将节点移离中心时,其他节点将沿相反方向移动,以补偿移动,因此质心保持在相同位置.

相反,使用forceX和forceY:

x和y定位力以可配置的强度将节点推向沿给定尺寸的期望位置.

那么,这就是模拟:

const simulation = d3.forceSimulation()
     .force('link', d3.forceLink().distance(200))
     .force('charge', d3.forceManyBody())
     .force('centerX', d3.forceX(width / 2))
     .force('centerY', d3.forceY(height / 2));

这是一个更新的小提琴:https://jsfiddle.net/ahdbLL8a/