Fit Force Directed Graph in a viewpoint

Community Help
1

I’m using this force directed graph from: <observablehq.com/d/785d7e28c550e0df and some nodes appear off-screen. I’d like to be able to zoom out to see all the nodes. Please help if you know a solution!
(Or if you can make everything fit in the view point, it’ll also work!)

2

please share (or publish “unlisted”) the notebook?

3

@Fil sorry, I just publish it.

4

you can adjust the forces like so:

//create a simulation for an array of nodes, and compose the desired forces.
simulation = d3.forceSimulation()
    .force("link", d3.forceLink() // This force provides links between nodes
                    .id(d => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.
                    .distance(50)
     ) 
    .force("charge", d3.forceManyBody().strength(-15)) // This adds repulsion (if it's negative) between nodes. 
    .force("center", d3.forceCenter(width / 2, height / 2)); // This force attracts nodes to the center of the svg area
2 Likes
5

works perfectly! Thank you :slight_smile: