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
