-
Notifications
You must be signed in to change notification settings - Fork 53
Cosmos v2 (Beta version) configuration
Stukova Olya edited this page Jul 26, 2024
·
2 revisions
Property | Description | Default |
---|---|---|
disableSimulation | Do not run the simulation, just render the graph. Cosmos uses the x and y values of the points’ data to determine their position in the graph. If x and y values are not specified, the position of the points 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 |
defaultPointColor | The default color to use for points when no point colors are provided, or if the color value in the array is undefined or null . This can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values in the format [red, green, blue, alpha] where each value is a number between 0 and 255 |
#b3b3b3 |
pointGreyoutOpacity | Greyed out point opacity value when the selection is active | 0.1 |
defaultPointSize | The default size value to use for points when no point sizes are provided or if the size value in the array is undefined or null
|
4 |
pointSizeScale | Scale factor for the point size | 1 |
hoveredPointCursor | Cursor style to use when hovering over a point | auto |
renderHoveredPointRing | Turns ring rendering around a point on hover on / off | true |
hoveredPointRingColor | Hovered point ring color hex value | white |
focusedPointRingColor | Focused point ring color hex value | white |
renderLinks | Turns link rendering on / off | true |
defaultLinkColor | The default color to use for links when no link colors are provided, or if the color value in the array is undefined or null . This can be either a hex color string (e.g., '#666666') or an array of RGBA values in the format [red, green, blue, alpha] where each value is a number between 0 and 255 |
#666666 |
linkGreyoutOpacity | Greyed out link opacity value when the selection is active | 0.1 |
defaultLinkWidth | The default width value to use for links when no link widths are provided or if the width value in the array is undefined or null
|
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 |
defaultLinkArrows | The default link arrow value that controls whether or not to display link arrows | 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 point, its index will be passed as the first argument, position as the second argument and the corresponding mouse event as the third argument:: (index: number | undefined, pointPosition: [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 point, its index will be passed as the first argument, position as the second argument and the corresponding mouse event as the third argument: (index: number
|
undefined, pointPosition: [number, number] |
events.onPointMouseOver | Callback function that will be called when a point appears under the mouse as a result of a mouse event, zooming and panning, or movement of points. The point index will be passed as the first argument, position as the second argument and the corresponding mouse event or D3's zoom event as the third argument: (index: number, pointPosition: [number, number], event: MouseEvent
|
D3DragEvent<HTMLCanvasElement, undefined, Hovered> |
events.onPointMouseOut | Callback function that will be called when a point is no longer underneath the mouse pointer because of a mouse event, zoom/pan event, or movement of points. The corresponding mouse event or D3's zoom event will be passed as the first argument: (event: MouseEvent
|
D3ZoomEvent<HTMLCanvasElement, 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 |
events.onDragStart | Callback function that will be called when dragging starts. First argument is a D3 Drag Event: (event: D3DragEvent) => void
|
undefined |
events.onDrag | Callback function that will be called continuously during dragging. First argument is a D3 Drag Event: (event: D3DragEvent) => void
|
undefined |
events.onDragEnd | Callback function that will be called when dragging ends. First argument is a D3 Drag Event: (event: D3DragEvent) => void
|
undefined |
showFPSMonitor | Show WebGL performance monitor | false |
pixelRatio | Canvas pixel ratio | 2 |
scalePointsOnZoom | Scale the points 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 |
disableDrag | Disables dragging points | false |
fitViewOnInit | Whether to center and zoom the view to fit all points 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 |
fitViewByPointsInRect | When fitViewOnInit is set to true , fits the view to show the points 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 |
pointSamplingDistance | Point sampling distance in pixels between neighboring points when calling the getSampledPointPositionsMap method. This parameter determines how many points will be included in the sample |
150 |
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 point under the mouse pointer, its index will be passed as the second argument and position as the third argument: (alpha: number, hoveredIndex: number | undefined, pointPosition: [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 |