没有边的节点在D3 v4中转义图

Question

我已经构建了一个使用D3.js V4动态加载几百个（有时是几千个）节点的图表。尽管我试图调整它的力量，但是有一些节点集群可能变得不那么混乱，但是排斥强制推动没有边缘的节点画布。

似乎没有简单的方法来设置单个节点，没有边缘向中心靠近距离

以下是截图（注意右上角的节点）：

以下是所涉及的力量：

    var repelForce = d3.forceManyBody()
                     .strength(-200)
                     .distanceMax(400)
                     .distanceMin(150);



var gSimulation = d3.forceSimulation()
    .force('link', d3.forceLink().id((d) => d.id))
    .force('charge', repelForce)
    .force('center', d3.forceCenter(gwidth / 2, gheight / 2));

期待以其他方式调整或优化明确无边界的节点......

Answer 1

尝试再施加两个力量：

forceY和forceX，这些可以作为重力来保持节点聚集在中心周围。从API文档：

  

x和y定位力将节点推向所需位置   沿给定尺寸具有可配置的强度。径向   力是相似的，除了它将节点推向最近的点   给定的圆圈。力的强度与之成正比   节点位置和目标之间的一维距离   位置。虽然这些力可用于定位各个节点，   它们主要用于适用于所有（或   大多数节点。 （API documentation）

这些力的使用可能是一种简单的解决方案，可以防止节点由于排斥力而过度徘徊。申请：

simulation.force("forceX", d3.forceX(width/2).strength(k) )
  .force("forceY", d3.forceY(height/2).strength(k) );

虽然这种方法应该有效，但如果您只想将这些力量应用于未链接的节点，则可以选择性地应用力：

  simulation
   .force("forceX",d3.forceX(width/2).strength(function(d){ return hasLinks(d) ? 0 : 0.05; }) )
   .force("forceY",d3.forceY(height/2).strength(function(d){ return hasLinks(d) ? 0 : 0.05; }) )

其中hasLinks（）是确定节点是否孤独的函数。如果是，则应用非零强度，如果它具有链接，则将方向力强度设置为零。这是一个quick block。您可能需要修改强度值以使节点保持在力布局的视图中。

如果你担心强度的固定值可能不适用于动态数据，那么如果在边界框/ svg之外检测到节点，则可以增加这两种力的强度。