具有超过 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);