SHW
SHW

Reputation: 501

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

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:

Desired

But it currently looks like this:

Status quo

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

Upvotes: 1

Views: 254

Answers (0)

Related Questions