在 D3 中配置 force 参数，以便所有层以省略号圆圈运行，并带有一个中心节点

问题描述

我和我的开发人员正在努力使力参数正确以创建这种令人敬畏的可视化效果，但我们遇到了困难。

可视化效果应如下所示：

但目前看起来是这样的：

你们对我们如何解决这个问题有一些想法吗？

我们目前正在使用这些参数，灰色节点是中心节点：

.force('collide',d3.forceCollide().strength(1).radius((d: any) => {
if (d.labels[0] === "Basis") {
return 80;
} else if (d.labels[0] === "Thema") {
return 70;
} else if (d.labels[0] === "Onderneming") {
return 70;
} else {
return options.nodeRadius * 1.3;
}
}))
var linkForce = d3.forceLink(relationships).id((d: any) => d.id).distance((d: any) => {
if (d.type === "WERKT_AAN") {
return 120;
} else if (d.type === "DRAAGT_BIJ_AAN") {
return 100;
} else if (d.type === "DRAAGT_BIJ_MET") {
return 90;
} else {
return 90;
}
}
).iterations(2);
simulation.force('link',linkForce);

并将中心节点锚定到屏幕中心

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）