Link update pattern for force directed graph

Community Help
1

I have a temporal force directed graph based in part on @mbostock’s temporal force directed graph and @bryangingechen’s force update pattern notebook. I’m having trouble with the link update pattern. I can get my links to enter and exit correctly, but on update, all of the links appear to exit and then re-enter. This makes the whole graph flash when there’s a lot of links/nodes, which I worry is an accessibility issue, and seems to slow down the browser quite a lot. The visualization is otherwise shaped correctly with the correct links and nodes entering/exiting, it’s just the flashing on update that’s an issue.

My network is here, about halfway down the page. In a previous version based more on Bostock’s temporal force directed graph, I couldn’t get the nodes to update radius without the whole graph (nodes and links both) appearing to be redrawn every update. My data is shaped similarly to the temporal force directed graph example.

1 Like
2

I think the issue is with the key function you used for the links, when I changed it to
d => d.source.id + ":" + d.target.id it seemed to be entering and updating properly. (this will uniquely select the pairs by id, i don’t think javascript can do an equality check on an array of two objects)

fyi, you can link to a specific cell by selecting the 3 dots menu on the top left of the cell and choosing “copy link” like so:

1 Like
3

Thanks for the heads up about the cell link!

And yes, changing the links key function fixed it!