d3-force：在过滤/删除节点时保持图紧凑

Question

我使用d3-force来绘制大约360个节点的图。

const simulation = d3.forceSimulation(nodes)
    .force(
        'charge',
        d3.forceManyBody()
            .distanceMax(200)
            .strength(-50)
    )
    .force(
        'link',
        d3.forceLink(links)
            .id((d) => d.id)
            .distance(30)
    )
    .force(
        'center',
        d3.forceCenter(
            $svg.innerWidth() / 2,
            $svg.innerHeight() / 2,
        )
    );

在所有可见的节点上看起来都不错–但也有可能过滤/删除节点，在这种情况下，我希望图形比实际更紧凑[em]（请参见动画）。

这可能是由于剩余节点之间没有边缘，并且在新的模拟开始时它们已经散布了很多。

虽然我可以将所有节点的位置简单地重置到画布的中心，但在过渡方面看起来并不好。理想情况下，每个节点将以更紧凑的布局从当前位置移动到新位置。

有没有办法做到这一点？

我认为forceManyBody的强度可能会从最初的正值（吸引力）转变为负值（排斥力），但显然在仿真过程中只能设置一次该值。 / p>

Answer 1

添加引力（https://github.com/ericsoco/d3-force-attract）效果很好。