Network graph : how to make a sticky node

[Hokseed]

Hello,

Im trying to make a beautiful network graph like the one from the demo (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/network-graph) but mine had a lot of nodes and they are always in movment.

The chart parameters are the same as the one from the demo.

The thing is that I want to keep the big nodes (I put them big because they are the ancestors of my family tree) on the center. Is there a possibility to make a node fixed / sticky ?

I already tried to disable the simulation (all nodes appears on a side), or with the mass attribute.

Thanks in advance

[pawelfus]

Hi @Hokseed

Thanks for sharing the idea! What you actually need is a treegraph, not a networkgraph - please vote for this feature on our UserVoice or consider using Organization chart. While it's possible to draw tree-like structure in networkgraph, by the definition of the algorithm used in networkgraph makes nodes behaving like particles. For example in tree structure, you expect root to be render on top of the graph, while in network graph nodes will be rendered around the root.

What you can do is to set fixed position for a particular node (temporary - until user drag&drop this node), but it's not part of the official API, take a look: https://jsfiddle.net/BlackLabel/kzwhna2q/

[Hokseed]

Just what I needed ! thank you @pawelfus

[Hokseed]

Hello,

Im reopening this because when I have a very big network graph, setting sticky only one node is useless.

What is the best way to set sticky the entire graph once the graph is completely loaded and take all the space in the area ? (having 200 nodes always moving is annoying and not good for the perfs)

(and I do need a network graph to do this, the design is perfect for what i want)
Thank you (@pawelfus)

[KacperMadej]

Hi @Hokseed

It might be that the series type you are trying to use is not the best for the data you have or the chart you want to get.
For technical support please use https://www.highcharts.com/blog/support/

P.S.
You could use another series type for nodes and links. Bubble series for nodes and a scatter with an enabled line for links. POC: https://jsfiddle.net/BlackLabel/15s7wtnq/

[Hokseed]

Ty for your answer @KacperMadej

I understand your point and finally I just want to find a way to keep my network graph at the center of my dialogbox... Because sometimes all my nodes go to a side and that's not very nice.

I tried in first to make one node sticky and that's now better but still not perfect.

[pawelfus]

Hi @Hokseed

You can use other options from series.layoutAlgorithm:

• initialPositions allows you define initial positions for nodes. Different initial positions results in different end layouts
• increase friction - that prevents from oscillations, which might seem to be an infinite animation
• change integration in the algorithm, but I'm afraid you will get layout that won't fit your family tree design
• decrease maxIterations - so algorithm's simulation will end sooner

Regarding this:

I just want to find a way to keep my network graph at the center of my dialogbox

• increase gravitationalConstant - so nodes will render closer to it's barycenter (note it's barycenter, not the plotting area's center). Too big value can make the graph meander on the plotting area.
• set linkLength - https://jsfiddle.net/BlackLabel/buq6jn2g/

In general, when using networkgraph you need to tinker options a bit, there's no perfect set of default options that will work for all datasets :)

[sebastianbochan]

Closed due to inactivity.