D3.js强制布局:如何隔离节点组?

时间:2012-07-13 17:04:38

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

我想要实现的目标是什么?

我希望有一组节点,在树状结构中,每个根都是主根,或者是来自另一棵树的叶子的后代。

生成下面看到的内容很简单,但我真正希望看到的是每个根周围的完整圆圈。然而,由于节点彼此排斥,因此在每个簇之间存在下面的间隙。 我认为解决方案涉及忽略来自不同根源的叶子之间的电荷引起的排斥

enter image description here

我的想法

  • 在每个根周围设置一些半径,以排除超出该半径的所有方向上的其他节点,允许叶子在其中是圆形的
  • 使用linkDistances和linkStrengths以某种方式排列群集,使其不会显着交互

这可能吗?

除了我模糊的想法,我真的不知道如何做到这一点!

通过阅读D3文档,我发现与动态linkDistance和linkStrength方法不同,节点电荷操作似乎是通用的:

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

如果这个陈述是真的,你们其中一个人能指导我正确的方向吗?

2 个答案:

答案 0 :(得分:1)

我不确定你将如何接近它,但我找到了一个例子,其中群集只在其自身内充电,节点不与不同的群体互动:http://bl.ocks.org/mbostock/1804889

答案 1 :(得分:0)

我认为答案的开头可能出现在这个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; } 
    }) 

正如链接回答所提到的那样,你几乎肯定要尝试"摩擦"和" linkDistance。"不要害怕反复试验 - 我至少几个月来一直在间歇性地处理这类问题,而且还没有找到一个"将军"解。