# Force graph layout initialisation

**URL:** https://talk.observablehq.com/t/force-graph-layout-initialisation/9029
**Category:** Help
**Created:** [March 29, 2024, 5:25pm UTC](https://talk.observablehq.com/t/force-graph-layout-initialisation/9029 "2024-03-29T17:25:47Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)
#### Post date: [March 29, 2024, 5:25pm UTC](https://talk.observablehq.com/t/force-graph-layout-initialisation/9029/1 "2024-03-29T17:25:47Z")

</div>

Hi,

I am a little bit lost in the way to initialize a graph layout.  
I have forked the [Sticky Force Layout / D3 | Observable](https://observablehq.com/@d3/sticky-force-layout?collection=@d3/d3-force)  
and computed my own version.

The problem is that the behaviour is not the same at the initialization and when I rerun the cell where the graph layout is produced.  
The visibility of labels of the connected nodes are not set properly when a click event is used on a node. And the coAuthors variable is empty.  
Once rerun the cell with the svg.nodes(), the behaviour is correct (labels of connected nodes are visible), the coAuthors array set correctly.

I must also admit that the  
`yield svg.nodes();`is not clear.

Another point when you load the notebook for the first time is that the variable coAuthors is an empy array whereas it should set properly.  
That what is heppening when I run the cell.

So problem of initilization.

> **[Author relationships](https://observablehq.com/@pbrockmann/author-relationships)**
>
> https://observablehq.com/@d3/force-directed-graph-component Notes: Events on nodes: Drag and release the nodes to change position Click on node to highlight only co-authors Double click on moved node to release its position and reset links visibility...

Let me know what I have missed.  
Patrick

---

<div class="post-metadata">

### Author: ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)
#### Post date: [April 2, 2024, 10:46am UTC](https://talk.observablehq.com/t/force-graph-layout-initialisation/9029/2 "2024-04-02T10:46:34Z")

</div>

I have captured what is shown when I first load the notebook, then what happens when I run the cell that defines the variable `coAuthors`.  
Once run, the array is no more empty (what I expect). Why it is empty when I load the notebook the first time ?  
This is what I do not understand.

At first load:

 ![Screenshot from 2024-04-02 12-53-35](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/14853392a6a19d3d8fddd0b6165a61dd457257f1.png)

After having run the cell:

 ![Screenshot from 2024-04-02 12-55-05](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/c/c9935e0159060c28abacffd6a34336eb6b18215d.png)

Do I have to used a promise to delay the evaluation of the cell ?

Any lights welcomed.

---

<div class="post-metadata">

### Author: ![MP\_Li](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mp_li/32/8722_2.png) [@MP\_Li](https://talk.observablehq.com/u/MP_Li)
#### Post date: [April 2, 2024, 5:22pm UTC](https://talk.observablehq.com/t/force-graph-layout-initialisation/9029/3 "2024-04-02T17:22:20Z")

</div>

I don’t quite understand the first issue you are facing.

But after playing with your notebook a bit, the second issue where you don’t see new `coAuthors` until rerunning cell manually, is because the cell depends on `json.links`, which doesn’t get updated – **the objects inside the array does, but not the array itself**.

Without diving deeper, I think you potentially can fix this by:

1. at where you update objects in `json.links`, return a new array for `json.links`, instead of mutating/pushing/poping objects from the array itself. Like instead of `json.links.push(<new obj>)`, do `json.links = [...json.links, <new obj>]`

2. at a variable that mutates with your change to objects in `json.links`, and then include that variable in the `coAuthors` cell, too, such that the object change triggers the `coAuthors` cell change, too.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/ea578c4058b3df80412b6449b688841a2b408f02.jpeg)

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/0/0d180f807f005ca56cc0068a38176b0135b0fb91.png)

---

<div class="post-metadata">

### Author: ![MP\_Li](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mp_li/32/8722_2.png) [@MP\_Li](https://talk.observablehq.com/u/MP_Li)
#### Post date: [April 2, 2024, 6:00pm UTC](https://talk.observablehq.com/t/force-graph-layout-initialisation/9029/4 "2024-04-02T18:00:00Z")

</div>

I was also able to get the `coAuthors` cell updating at page load by extracting `links` to its own variable.

So it does look a object/array reference updating + cell dependency issue.

 ![Screenshot 2024-04-02 at 1.38.02 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/251ac3bd6c958c959d38023f366ae10375cdd7eb.png)  
 ![Screenshot 2024-04-02 at 1.38.44 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/f/f450c9fdc31e966b3376a4dc97112ae1e3a7ceb6.png)

---

<div class="post-metadata">

### Author: ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)
#### Post date: [April 2, 2024, 9:04pm UTC](https://talk.observablehq.com/t/force-graph-layout-initialisation/9029/5 "2024-04-02T21:04:30Z")

</div>

Many thanks.  
Indeed an object/array reference updating + cell dependency issue.

Using a mutable on links as you have proposed solve the initialization issue.

Not for the opacity on labels.

Here is what I get at first click on a node:

![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/f/f3cf015a8f509a038afda84d6e7c3b019939022d.png)

Then after having run the cell with the graph.

![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/c/c799d3b1b16f2cebe9c0da7a4c2bd33d0cb5c081.png)

Same issue as with the links ?

---

<div class="post-metadata">

### Author: ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)
#### Post date: [April 2, 2024, 9:17pm UTC](https://talk.observablehq.com/t/force-graph-layout-initialisation/9029/6 "2024-04-02T21:17:21Z")

</div>

I think I have solved the issue by using the mutable variable inside the cell that defines the graph.
