Class: GraphConfig
Implements
Constructors
Constructor
new GraphConfig():
GraphConfig
Returns
GraphConfig
Properties
| Property | Type | Description |
|---|---|---|
enableSimulation | boolean | If set to false, the simulation will not run. This property will be applied only on component initialization and it canât be changed using the setConfig method. Default value: true |
backgroundColor | string | Canvas background color. Can be either a hex color string (e.g., â#b3b3b3â) or an array of RGBA values. Default value: â#222222â |
spaceSize | number | Simulation space size. Default value: 4096 (larger values may crash on some devices, e.g. iOS; see https://github.com/cosmosgl/graph/issues/203). |
pointDefaultColor | string | 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. Default value: â#b3b3b3â |
pointGreyoutOpacity | undefined | Opacity value for points when they are greyed out (when selection is active). Values range from 0 (completely transparent) to 1 (fully opaque). If defined, this value will override the alpha/opacity component of pointGreyoutColor. Default value: undefined |
pointGreyoutColor | undefined | The color to use for points when they are greyed out (when selection is active). 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. If not provided, the color will be the same as the pointâs original color, but darkened or lightened depending on the background color. If pointGreyoutOpacity is also defined, it will override the alpha/opacity component of this color. Default value: undefined |
pointDefaultSize | number | 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. Default value: 4 |
pointOpacity | number | Universal opacity value applied to all points. This value multiplies with individual point alpha values (if set via setPointColors). Useful for dynamically controlling opacity of all points without updating individual RGBA arrays. Default value: 1.0 |
pointSizeScale | number | Scale factor for the point size. Default value: 1 |
hoveredPointCursor | string | Cursor style to use when hovering over a point Default value: auto |
hoveredLinkCursor | string | Cursor style to use when hovering over a link Default value: auto |
renderHoveredPointRing | boolean | Turns ring rendering around a point on hover on / off Default value: false |
hoveredPointRingColor | string | Hovered point ring color hex value. Can be either a hex color string (e.g., â#b3b3b3â) or an array of RGBA values. Default value: white |
focusedPointRingColor | string | Focused point ring color hex value. Can be either a hex color string (e.g., â#b3b3b3â) or an array of RGBA values. Default value: white |
focusedPointIndex | undefined | Set focus on a point by index. A ring will be highlighted around the focused point. When set to undefined, no point is focused. Default value: undefined |
linkDefaultColor | string | 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. Default value: â#666666â |
linkOpacity | number | Universal opacity value applied to all links. This value multiplies with individual link alpha values (if set via setLinkColors). Useful for dynamically controlling opacity of all links without updating individual RGBA arrays. Default value: 1.0 |
linkGreyoutOpacity | number | Greyed out link opacity value when the selection is active. Default value: 0.1 |
linkDefaultWidth | number | 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. Default value: 1 |
linkWidthScale | number | Scale factor for the link width. Default value: 1 |
hoveredLinkColor | undefined | The color to use for links when they are hovered. This can be either a hex color string (e.g., â#ff3333â) or an array of RGBA values in the format [red, green, blue, alpha] where each value is a number between 0 and 255. Default value: undefined |
hoveredLinkWidthIncrease | number | Number of pixels to add to the link width when hovered. The hovered width is calculated as: originalWidth + hoveredLinkWidthIncrease Default value: 5 |
renderLinks | boolean | Turns link rendering on / off. Default value: true |
curvedLinks | boolean | If set to true, links are rendered as curved lines. Otherwise as straight lines. Default value: false |
curvedLinkSegments | number | Number of segments in a curved line. Default value: 19. |
curvedLinkWeight | number | Weight affects the shape of the curve. Default value: 0.8. |
curvedLinkControlPointDistance | number | 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. Default value: 0.5 |
linkDefaultArrows | boolean | The default link arrow value that controls whether or not to display link arrows. Default value: false |
linkArrowsSizeScale | number | Scale factor for the link arrows size. Default value: 1 |
scaleLinksOnZoom | boolean | Increase or decrease the size of the links when zooming in or out. Default value: false |
linkVisibilityDistanceRange | number[] | 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). Default value: [50, 150] |
linkVisibilityMinTransparency | number | The transparency value that the link will have when its length reaches the maximum link distance value from linkVisibilityDistanceRange. Default value: 0.25 |
simulationDecay | number | Decay coefficient. Use smaller values if you want the simulation to âcool downâ slower. Default value: 5000 |
simulationGravity | number | Gravity force coefficient. Default value: 0.25 |
simulationCenter | number | Centering to center mass force coefficient. Default value: 0 |
simulationRepulsion | number | Repulsion force coefficient. Default value: 1.0 |
simulationRepulsionTheta | number | Decreases / increases the detalization of the Many-Body force calculations. Default value: 1.15 |
simulationLinkSpring | number | Link spring force coefficient. Default value: 1 |
simulationLinkDistance | number | Minimum link distance. Default value: 10 |
simulationLinkDistRandomVariationRange | number[] | Range of random link distance values. Default value: [1, 1.2] |
simulationRepulsionFromMouse | number | Repulsion coefficient from mouse position. The repulsion force is activated by pressing the right mouse button. Default value: 2 |
enableRightClickRepulsion | boolean | Enable or disable the repulsion force from mouse when right-clicking. When set to true, holding the right mouse button will activate the mouse repulsion force. When set to false, right-clicking will not trigger any repulsion force. Default value: false |
simulationFriction | number | Friction coefficient. Values range from 0 (high friction, stops quickly) to 1 (no friction, keeps moving). Default value: 0.85 |
simulationCluster | number | Cluster coefficient. Default value: 0.1 |
onSimulationStart | () => void | undefined | Callback function that will be called when the simulation starts. Default value: undefined |
onSimulationTick | (alpha, hoveredIndex?, pointPosition?) => void | undefined | 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 |
onSimulationEnd | () => void | undefined | Callback function that will be called when the simulation stops. Default value: undefined |
onSimulationPause | () => void | undefined | Callback function that will be called when the simulation gets paused. Default value: undefined |
onSimulationUnpause | () => void | undefined | Callback function that will be called when the simulation is unpaused. Default value: undefined |
onClick | (index, pointPosition, event) => void | undefined | 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 |
onPointClick | (index, pointPosition, event) => void | undefined | Callback function that will be called when a point is clicked. The point index will be passed as the first argument, position as the second argument and the corresponding mouse event as the third argument: (index: number, pointPosition: [number, number], event: MouseEvent) => void. Default value: undefined |
onLinkClick | (linkIndex, event) => void | undefined | Callback function that will be called when a link is clicked. The link index will be passed as the first argument and the corresponding mouse event as the second argument: (linkIndex: number, event: MouseEvent) => void. Default value: undefined |
onBackgroundClick | (event) => void | undefined | Callback function that will be called when the background (empty space) is clicked. The mouse event will be passed as the first argument: (event: MouseEvent) => void. Default value: undefined |
onContextMenu | (index, pointPosition, event) => void | undefined | Callback function that will be called when a context menu trigger (typically right click) happens on the canvas. If triggered 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 |
onPointContextMenu | (index, pointPosition, event) => void | undefined | Callback function that will be called when a context menu trigger (typically right click) happens on a point. The point index will be passed as the first argument, position as the second argument and the corresponding mouse event as the third argument: (index: number, pointPosition: [number, number], event: MouseEvent) => void. Default value: undefined |
onLinkContextMenu | (linkIndex, event) => void | undefined | Callback function that will be called when a context menu trigger (typically right click) happens on a link. The link index will be passed as the first argument and the corresponding mouse event as the second argument: (linkIndex: number, event: MouseEvent) => void. Default value: undefined |
onBackgroundContextMenu | (event) => void | undefined | Callback function that will be called when a context menu trigger (typically right click) happens on the background (empty space). The mouse event will be passed as the first argument: (event: MouseEvent) => void. Default value: undefined |
onMouseMove | (index, pointPosition, event) => void | undefined | 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 |
onPointMouseOver | (index, pointPosition, event, isSelected) => void | undefined | 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, the corresponding mouse event or D3âs zoom event as the third argument, and whether the hovered point is selected as the fourth argument: `(index: number, pointPosition: [number, number], event: MouseEvent |
onPointMouseOut | (event) => void | undefined | 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 |
onLinkMouseOver | (linkIndex) => void | undefined | Callback function that will be called when the mouse moves over a link. The link index will be passed as the first argument: (linkIndex: number) => void. Default value: undefined |
onLinkMouseOut | (event) => void | undefined | Callback function that will be called when the mouse moves out of a link. The event will be passed as the first argument: `(event: MouseEvent |
onZoomStart | (e, userDriven) => void | undefined | 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. Default value: undefined |
onZoom | (e, userDriven) => void | undefined | 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. Default value: undefined |
onZoomEnd | (e, userDriven) => void | undefined | 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. Default value: undefined |
onDragStart | (e) => void | undefined | Callback function that will be called when dragging starts. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined |
onDrag | (e) => void | undefined | Callback function that will be called continuously during dragging. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined |
onDragEnd | (e) => void | undefined | Callback function that will be called when dragging ends. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined |
showFPSMonitor | boolean | Show WebGL performance monitor. Default value: false |
pixelRatio | number | Pixel ratio for the canvas. Higher values use more GPU memory but provide better quality on high-DPI displays. Default value: `window.devicePixelRatio |
scalePointsOnZoom | boolean | Increase or decrease the size of the points when zooming in or out. Default value: false |
initialZoomLevel | undefined | Initial zoom level. Can be set once during graph initialization. If set, fitViewOnInit value will be ignored. Default value: undefined |
enableZoom | boolean | Enables or disables zooming in and out. Default: true |
enableSimulationDuringZoom | boolean | Controls whether the simulation remains active during zoom operations. When set to true, the simulation continues running while zooming. When set to false, the simulation pauses during zoom operations. Default value: false |
enableDrag | boolean | Enables or disables dragging of points in the graph. Default value: false |
fitViewOnInit | boolean | Whether to center and zoom the view to fit all points in the scene on initialization or not. Ignored if initialZoomLevel is set. Default: true |
fitViewDelay | number | Delay in milliseconds before fitting the view when fitViewOnInit is enabled. Useful if you want the layout to stabilize a bit before fitting. Default: 250 |
fitViewPadding | number | Padding to apply when fitting the view to show all points. This value is added to the calculated bounding box to provide some extra space around the points. This is used when the fitViewOnInit option is enabled. Default: 0.1 |
fitViewDuration | number | Duration in milliseconds for fitting the view to show all points when fitViewOnInit is enabled. Default: 250 |
fitViewByPointsInRect | undefined | 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. Default: undefined |
fitViewByPointIndices | undefined | When fitViewOnInit is set to true, fits the view to show only the specified points by their indices. Takes precedence over fitViewByPointsInRect when both are provided. Default: undefined |
randomSeed | undefined | 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. Default value: undefined |
pointSamplingDistance | number | 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. Default value: 150 |
linkSamplingDistance | number | Link sampling distance in pixels between neighboring links when calling the getSampledLinks method. This parameter determines how many links will be included in the sample (based on link midpoints in screen space). Default value: 150 |
attribution | string | Controls the text shown in the bottom right corner. - When a non-empty string is provided: Displays the string as HTML - When empty string or not provided: No text is displayed |
rescalePositions | undefined | Controls automatic position adjustment of points in the visible space. When undefined (default): - If simulation is disabled (enableSimulation: false), points will be automatically repositioned to fit within the visible space - If simulation is enabled, points will not be rescaled When explicitly set: - true: Forces points positions to be rescaled - false: Forces points positions to not be rescaled |
Methods
init()
init(
config):void
Parameters
| Parameter | Type |
|---|---|
config | GraphConfigInterface |
Returns
void
deepMergeConfig()
deepMergeConfig<
T>(current,next,key):void
Type Parameters
| Type Parameter |
|---|
T |
Parameters
| Parameter | Type |
|---|---|
current | T |
next | T |
key | keyof T |
Returns
void