How to size the graph to fit the maximum window size?
- Dominant language
- JavaScript
- Stars
- 3.9k
- Forks
- 418
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I built a network graph using vivagraph, and forcelayout. Nodes are dispersing from (0,0) to outward and makes circular shape system. I have about 400 nodes and they are keep dispersing though at some point they are quite stabilized (but still moving).
What I want: I want the graph to fit into the available window size. Two ways I thought about.
1. stopping the layout dispersion using layout.pause() method.
2. scale the svg to the window size.
3. use constant layout and positioning each node specifically.
Problems: for 1, I do not know how should I apply the layout.pause() when and where in my code.
for 2, I tried scaling the svg using viewBox method, but it didn't work out. Didn't have any effect.
for 3, it will take alot of time to define each and every node position for over 400 nodes.
Below is my code:
## data from Python Flask
var linkdata = {{ linkdata|safe }}
var graph = Viva.Graph.graph();
## forceDirected layout
var layout = Viva.Graph.Layout.forceDirected(graph, {
springLength:20,
springCoeff:0,
dragCoeff:0.1,
gravity: -0.0025,
theta: 0.3
});
## add links using the data
for (i = 0; i
svg { viewBox: 0 0 60 55; width: 100%; height: 97%; margin-top:-20px; background-color: #fff;}
and right at the "graphics" as an .attr('viewBox', '0 0 60 55'), but didn't work out.
Please let me know if you have some ideas to solve my problem. The svg got too big unless using scaling or layout.pause method, and it will be harder for users to see/browse the network.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at the forceDirected layout and renderer.run setup shown in the issue, then inspect how layout.pause() and the SVG viewBox apply to the rendered graphics. Done means the roughly 400-node graph fits the available window and remains usable without manually positioning every node; verify the approach against the layout and graphics configuration shown.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100