D3.js 强制布局：如何隔离节点组？答案

【问题标题】：D3.js force layout: How to isolate node groups?D3.js 强制布局：如何隔离节点组？
【发布时间】：2012-07-13 13:48:10
【问题描述】：

我想要达到什么目的？

我希望在树状结构中拥有一组节点，其中每个根要么是主根，要么是另一棵树的叶子的后代。

生成您在下面看到的内容很容易，但我真正希望看到的是围绕每个根的完整圆圈。但是，由于节点相互排斥，因此每个集群之间存在以下间隙。 我认为解决方案包括忽略来自不同根的叶子之间的电荷引起的排斥。

我的想法

在每个根周围设置某种半径，以排斥超出该半径的所有方向上的其他节点，从而使叶子在其中成为圆形
使用 linkDistances 和 linkStrengths 以某种方式排列集群，使其不会显着交互

这可能吗？

除了模糊的想法，我真的不知道该怎么做！

通过阅读 D3 文档，我发现与动态链接距离和链接强度方法不同，节点电荷操作似乎是通用的：

"All nodes are assumed to be infinitesimal points with equal charge and mass."

如果这句话是真的，你们中的哪一个可以指导我正确的方向吗？

【问题讨论】：

标签： graph d3.js simulation data-visualization force-layout

【解决方案1】：

我不确定您将如何处理它，但我发现了一个示例，其中集群仅在自身内部具有电荷，节点不与不同的节点交互：http://bl.ocks.org/mbostock/1804889

【讨论】：

拖动气泡以查看实际效果

【解决方案2】：

我认为答案的开头可能是这个 stackoverflow 问题，Space out nodes evenly around root node in D3 force layout

知道是可以使每个节点的电荷依赖于相同的某些属性。用类似的东西试试

   .charge(function(d) { console.log(d); //you'll see this brings up the nodes
   if (d.something == onething) { 
      return    -1300;} 
   else { 
      return -100; } 
    })

正如链接到的答案所提到的，您几乎可以肯定必须尝试“摩擦”和“链接距离”。不要害怕尝试和错误——我至少已经断断续续地处理这种问题几个月了，还没有找到“通用”的解决方案。

【讨论】：