Cosmos configuration

Cosmos configuration properties

Property	Description	Default
disableSimulation	Do not run the simulation, just render the graph. Cosmos uses the x and y values of the nodes’ data to determine their position in the graph. If x and y values are not specified, the position of the nodes will be assigned randomly. This property will be applied only on component initialization and it can't be changed using the setConfig method	false
backgroundColor	Canvas background color	#222222
spaceSize	Simulation space size (max 8192)	4096
nodeColor	Node color accessor function or hex value	#b3b3b3
nodeGreyoutOpacity	Greyed out node opacity value when the selection is active	0.1
nodeSize	Node size accessor function or value in pixels	4
nodeSizeScale	Scale factor for the node size	1
renderHighlightedNodeRing	Turns the node highlight on hover on / off (Will be removed from version 2.0. Use property renderHoveredNodeRing instead)	true
renderHoveredNodeRing	Turns ring rendering around a node on hover on / off	true
highlightedNodeRingColor	Highlighted node ring color (Will be removed from version 2.0. Use property hoveredNodeRingColor or focusedNodeRingColor instead)	undefined
hoveredNodeRingColor	Hovered node ring color hex value	white
focusedNodeRingColor	Focused node ring color hex value	white
renderLinks	Turns link rendering on / off	true
linkColor	Link color accessor function or hex value	#666666
linkGreyoutOpacity	Greyed out link opacity value when the selection is active	0.1
linkWidth	Link width accessor function or value in pixels	1
linkWidthScale	Scale factor for the link width	1
curvedLinks	If set to true, links are rendered as curved lines. Otherwise as straight lines	false
curvedLinkSegments	Number of segments in a curved line	19
curvedLinkWeight	Weight affects the shape of the curve	0.8
curvedLinkControlPointDistance	Defines the position of the control point of the curve on the normal from the centre of the line. If set to 1 then the control point is at a distance equal to the length of the line	0.5
linkArrows	Turns link arrow rendering on / off	true
linkArrowsSizeScale	Scale factor for the link arrows size	1
linkVisibilityDistanceRange	The range defines the minimum and maximum link visibility distance in pixels. The link will be fully opaque when its length is less than the first number in the array, and will have linkVisibilityMinTransparency transparency when its length is greater than the second number in the array. This distance is defined in screen space coordinates and will change as you zoom in and out (e.g. links become longer when you zoom in, and shorter when you zoom out).	[50, 150]
linkVisibilityMinTransparency	The transparency value that the link will have when its length reaches the maximum link distance value from linkVisibilityDistanceRange.	0.25
useQuadtree	Use the classic quadtree algorithm for the Many-Body force. This property will be applied only on component initialization and it can't be changed using the setConfig method. ⚠ The algorithm might not work on some GPUs (e.g. Nvidia) and on Windows (unless you disable ANGLE in the browser settings).	false
simulation	Simulation parameters and event listeners	See Simulation configuration table for more details
events.onClick	Callback function that will be called on every canvas click. If clicked on a node, its data will be passed as the first argument, index as the second argument, position as the third argument and the corresponding mouse event as the forth argument: (node: Node | undefined, index: number | undefined, nodePosition: [number, number] | undefined, event: MouseEvent) => void	undefined
events.onMouseMove	Callback function that will be called when mouse movement happens. If the mouse moves over a node, its data will be passed as the first argument, index as the second argument, position as the third argument and the corresponding mouse event as the forth argument: (node: Node | undefined, index: number | undefined, nodePosition: [number, number] | undefined, event: MouseEvent) => void	undefined
events.onNodeMouseOver	Callback function that will be called when a node appears under the mouse as a result of a mouse event, zooming and panning, or movement of nodes. The node data will be passed as the first argument, index as the second argument, position as the third argument and the corresponding mouse event or D3's zoom event as the forth argument: (node: Node, index: number, nodePosition: [number, number], event: MouseEvent | D3ZoomEvent | undefined) => void	undefined
events.onNodeMouseOut	Callback function that will be called when node is no longer underneath the mouse pointer because of a mouse event, zoom/pan event, or movement of nodes. The corresponding mouse event or D3's zoom event will be passed as the first argument: (event: MouseEvent | D3ZoomEvent | undefined) => void	undefined
events.onZoomStart	Callback function that will be called when zooming or panning starts. First argument is a D3 Zoom Event and second indicates whether the event has been initiated by a user interaction (e.g. a mouse event): (event: D3ZoomEvent, userDriven: boolean) => void	undefined
events.onZoom	Callback function that will be called continuously during zooming or panning. First argument is a D3 Zoom Event and second indicates whether the event has been initiated by a user interaction (e.g. a mouse event): (event: D3ZoomEvent, userDriven: boolean) => void	undefined
events.onZoomEnd	Callback function that will be called when zooming or panning ends. First argument is a D3 Zoom Event and second indicates whether the event has been initiated by a user interaction (e.g. a mouse event): (event: D3ZoomEvent, userDriven: boolean) => void	undefined
showFPSMonitor	Show WebGL performance monitor	false
pixelRatio	Canvas pixel ratio	2
scaleNodesOnZoom	Scale the nodes when zooming in or out	true
initialZoomLevel	Initial zoom level. Can be set once during graph initialization	1
disableZoom	Disables zooming in and out	false
fitViewOnInit	Whether to center and zoom the view to fit all nodes in the scene on initialization or not	true
fitViewDelay	Delay in milliseconds before fitting the view. Useful if you want the layout to stabilize a bit before fitting	250
fitViewByNodesInRect	When fitViewOnInit is set to true, fits the view to show the nodes within a rectangle defined by its two corner coordinates [[left, bottom], [right, top]] in the scene space	undefined
randomSeed	Providing a randomSeed value allows you to control the randomness of the layout across different simulation runs. It is useful when you want the graph to always look the same on same datasets. This property will be applied only on component initialization and it can't be changed using the setConfig method.	undefined
nodeSamplingDistance	Node sampling distance in pixels between neighboring nodes when calling the getSampledNodePositionsMap method. This parameter determines how many nodes will be included in the sample	150

Simulation configuration

Cosmos layout algorithm was inspired by the d3-force simulation forces: Link, Many-Body, Gravitation, and Centering. It provides several simulation settings to adjust the layout. Each of them can be changed in real time, while the simulation is in progress.

Property	Description	Recommended range	Default
repulsion	Repulsion force coefficient	0.0 – 2.0	0.1
repulsionTheta	Decreases / increases the detalization of the Many-Body force calculations. When useQuadtree is set to true, this property corresponds to the Barnes–Hut approximation criterion.	0.3 – 2.0	1.7
repulsionQuadtreeLevels	Barnes–Hut approximation depth. Can only be used when useQuadtree is set true.	5 – 12	12
linkSpring	Link spring force coefficient	0.0 – 2.0	1.0
linkDistance	Minimum link distance	1 – 20	2
linkDistRandomVariationRange	Link distance randomness multiplier range	[0.8 – 1.2, 1.2 – 2.0]	[1.0, 1.2]
gravity	Gravity force coefficient	0.0 – 1.0	0.0
center	Centering force coefficient	0.0 – 1.0	0.0
friction	Friction coefficient	0.8 – 1.0	0.85
decay	Force simulation decay coefficient. Use smaller values if you want the simulation to "cool down" slower.	100 – 10 000	1000
repulsionFromMouse	Repulsion from the mouse pointer force coefficient. The repulsion force is activated by pressing the right mouse button.	0.0 – 5.0	2.0
simulation.onStart	Callback function that will be called when the simulation starts		undefined
simulation.onTick	Callback function that will be called on every simulation tick. The value of the first argument alpha will decrease over time as the simulation "cools down". If there's a node under the mouse pointer, its datum will be passed as the second argument, index as the third argument and position as the forth argument: (alpha: number, node: Node | undefined, index: number | undefined, nodePosition: [number, number] | undefined) => void`		undefined
simulation.onEnd	Callback function that will be called when the simulation stops		undefined
simulation.onPause	Callback function that will be called when the simulation gets paused		undefined
simulation.onRestart	Callback function that will be called when the simulation is restarted		undefined