d3 力有向图的分组项目相互重叠

Question

我有这个 plunker (https://next.plnkr.co/edit/17t5ujwC71IK3PCi)，它显示了根据组 ID 分组在一起的节点的 d3 图。图表看起来很好，但我需要确保这些组永远不会相互重叠（如下所示，橙色、蓝色和浅蓝色是不同的组，但它们出现在彼此之上）。

拖动它们会导致图表无休止地移动（这是另一个问题），并且并不总是能解决重叠问题。我看到了另一个例子（http://bl.ocks.org/GerHobbelt/3071239），它稍微好一点，但它是用 d3.v2 制作的。每个组之间有相当大的空间，便于分析。

我认为将 charge 设置为负值会起到神奇的作用，但将其设置为 .force('charge', d3.forceManyBody().strength(-30)) 完全没有帮助。

问题：

现在，尝试通过编写类似于我上面提到的 d3.v2 示例的代码来使组远离，但很难为我的 d3.v4 做类似的事情。关于如何动态地使所有组彼此远离有什么好的建议吗？

Answer 1

我最终跟随https://bl.ocks.org/emeeks/302096884d5fbc1817062492605b50dd 使用 forceX 和 forceY 将相同的组节点定位在一起 - 远离其他组。问题是组位置被硬编码如下：

this.grpPositions = {
  '1': {x: 100, y: 100},
  '2': {x: 900, y: 200},
  '3': {x: 700, y: 400},
  '4': {x: 200, y: 400},
  '5': {x: 500, y: 400},
  '6': {x: 600, y: 500}
};

我必须想出一些好的算法来根据组的总数和给定 SVG 的可用宽度和高度动态生成相距较远的组 x、y 坐标。

如果您通过 d3 有更好的方法，请随时发布您的答案，我会接受。