A network component connecting nodes with links using various forces,
the resulting layout will depends on linkDistance, centeringStrength
and repulsivity, so you should play with those parameters in order
to achieve the desired result.
You can also add some extra constrains via distanceMin and distanceMax.
The responsive alternative of this component is ResponsiveNetwork.
Please note that you can also use the useNetwork React hook if you want
to handle the rendering by yourself, it accepts an object with almost
the same props as the component and returns computed nodes & links.
Chart data defining nodes and links.
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
Control links' distance.
1Control how much the centering force affects nodes positioning.
10Control how nodes repel each other.
1Sets the minimum distance between nodes for the many-body force.
InfinitySets the maximum disteance between nodes for the many-body force.
120Adjust the simulation quality.
Define style for common elements such as labels, axes…
'NetworkNode'Custom node component for the SVG implementation.
Custom node rendering for the canvas implementation.
12Control nodes' size.
18Control active nodes' size.
8Control inactive nodes' size.
'#000000'Control nodes' color.
0Control nodes' border width.
Control nodes' border color.
'NetworkLink'Custom link component for the SVG implementation.
Custom link rendering for the canvas implementation.
1Control links' thickness.
Control links' color.
trueEnable/disable interactivity.
Custom tooltip component for nodes.
onClick handler.
onMouseEnter handler.
onMouseMove handler.
onMouseLeave handler.
Annotations for nodes.
'links', 'nodes', 'annotations']Defines the order of layers and add custom layers.
Main element role attribute.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.