score:2

Accepted answer

I have found a solution:

.nodeVal(node => {         
  node.fx = 500;
  node.fy = 500
})

Using the nodeVal method, I can access the attributes of the nodes to fix it. Adding a if statement would allow me to change it only if it the specific nodes I need. Thanks for everyone's help!

score:0

The API link that you've provided is really beautiful. It's such a complex chart to work with and it ticks almost every box.

However, it looks like the only way to adapt it to YOUR needs would be to hack into the js code which I would not advise.

Personally I would start with a simpler d3 version and customise from here.

For example: https://observablehq.com/@d3/force-directed-graph

Here, you'd need to customise the simulation.on("tick" function. Something like this:

node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    **.attr("fx", d => d.id === "Myrial" ? 500 : null)**
    **.attr("fy", d => d.id === "Myrial" ? 500 : null);**

`

OR for a similar approach to your example you could use Vega. That allows you to use fx and fy:

https://vega.github.io/vega/docs/transforms/force/


Related Query

More Query from same tag