Fix position of force-graph node using D3.js

Question

I'm using a force-graph D3 visualization from https://github.com/vasturiano/force-graph. This seems to provide great high-level API to create a force directed graph but I find it hard to customise as I'm new to Javascript.

<script src="//unpkg.com/force-graph"></script>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>

<script>

fetch('data.json').then(res => res.json()).then(data => {
      const Graph = ForceGraph()
      (document.getElementById('graph'))
        .graphData(data)
        .nodeAutoColorBy('group')
        .linkSource('source')
        .linkTarget('target')
})

</script>

The JSON data looks like this:

{
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1}
  ],
  "links": [
    {"source": "Napoleon", "target": "Myriel", "value": 1},
    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}
  ]
}

I am trying to fix the position of a particular node, for example id = Myriel to x=500, y=500. According to d3 force documentation, I need to specify fx and fy. How do I retrieve the id of the particular node to set the those attributes? Any help is greatly appreciated!

Answer 1

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!