d3.js - 没有边的节点在 D3 v4 中逃逸图

Question

我已经构建了一个使用 D3.js V4 动态加载数百(有时数千)节点的图。尽管我试图调整它的力量，但仍有一些节点集群可能会变得不那么困惑，但结果是 排斥 部队将没有边的节点推到边界 的 Canvas 。

似乎没有简单的方法可以设置没有边缘的单个节点向中心靠近

以下是屏幕截图(注意右上角的节点):


以下是所涉及的力量:

    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 文档:

The x- and y-positioning forces push nodes towards a desired position along the given dimension with a configurable strength. The radial force is similar, except it pushes nodes towards the closest point on a given circle. The strength of the force is proportional to the one-dimensional distance between the node’s position and the target position. While these forces can be used to position individual nodes, they are intended primarily for global forces that apply to all (or most) nodes. (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 之外检测到节点，您可以增加这两种力的强度。