具有超过 2600 个节点的 d3.js 集群气泡

Question

我一直遇到节点布局问题。我复制了这个可观察的https://observablehq.com/@d3/clustered-bubbles，它适用于较小的节点，但对于较大的节点似乎真的失真了。我在带有打字稿的反应应用程序中使用它。我没有可用的工作片段，因为数据很大。这些是问题体验的一些截屏视频： https ://share.getcloudapp.com/lluJnbWl https://share.getcloudapp.com/jkuQYBpq它不会强迫他们正确地进入他们的小组，并且动画效果不佳。

Answer 1

所以对于任何有同样问题的人，我们意识到我们在forceCluster方法中使用了不正确的字段：

function forceCluster(nodes) {

    const strength = 0.2;

    function force(alpha) {

        const centroids: any = d3Array.rollup(nodes, centroid, (d: any) => d.data.group);

        const l = alpha * strength;

        for (const d of nodes) {

            const { x: cx, y: cy } = centroids.get(d.data.group);

            d.vx -= (d.x - cx) * l;

            d.vy -= (d.y - cy) * l;

        }

    }

    force.initialize = (_) => (nodes = _);

    return force;

}

就这样d.group变成了d.data.group。

我们还更改了节点动画：

node.transition()

    .delay((d, i) => 50)

    .duration(750);