【问题标题】：D3 force layout differences between v3 and v4 when using mutliple connected components使用多个连接组件时，D3 强制 v3 和 v4 之间的布局差异
【发布时间】：2016-11-19 14:41:22
【问题描述】：

MWE

我尝试用两个版本创建相同的图表，这里是 Bl.ocks：

这些例子改编自one的官方例子。

问题

当有多个连接组件时，就会出现差异。在第 4 版中，有两件事特别不适用于我：

拖动一个连接的组件会使其他组件以非常非物理的方式在（我猜想）力中心周围疯狂平移；
鼠标按下时（即使没有实际移动），其他连接的组件无限期地移开，最终离开屏幕。

简而言之，第 3 版中的图表是牢不可破的，无论您如何处理节点，它们最终都会返回到稳定的位置。

如何修复这两种行为，使模拟更类似于版本 3？

【问题讨论】：

标签： force-layout d3.js

【解决方案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/

【讨论】：

太棒了，非常感谢，这正是我所追求的！
天哪！杰拉尔多！我不能告诉你我有多感激！！！升级到 d3v4 后，我花了几个小时寻找类似问题的解决方案……将我庞大的代码库一块一块地拆开……我的问题是关于在模拟一开始就疯狂的固定圆圈的标签。最后一个非常简单的解决方案是完全放下中心！我在jsfiddle 中发布了我的示例。如果可以的话，我会给你一百个赞；）
@Dominic 不用担心！巧合的是，我今天刚刚回答了一个类似的问题：stackoverflow.com/questions/41843166/…。显然，forceCenter 和 forceX/Y 之间存在一些混淆。
是的，毕竟新版本d3v4有相当多的深刻变化。它迫使您返回规格并再次阅读它们。我真的很欣赏它，因为它有许多不错的新功能，并且我能够通过这个过程进行很多优化。即使很费时间......