d3力有向图的分组项目彼此重叠

Question

我有这个插件（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有更好的方法，请随时发布您的答案，我会接受。