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,
        )
    );

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

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

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

有没有办法做到这一点？

我认为forceManyBody 的强度可能会从一开始的正值（吸引力）转变为负值（排斥），但显然这个值只能为模拟运行设置一次。

Answer 1

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