d3.js - Configuring force parameters in D3 so that all layers run in ellipsis (circles) with one central node

Question

Me and my developer are trying to get the force parameters right as to create this awesome visualisation, but we are having a hard time.

The visualisation should look like this:

But it currently looks like this:

Do you guys have some ideas on how we can solve this?

We are currently using these parameters, with the grey node being the central node:

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

and anchor central node to center of the screen

question from:https://stackoverflow.com/questions/65935376/configuring-force-parameters-in-d3-so-that-all-layers-run-in-ellipsis-circles

Answer 1

Waitting for answers