JavaScript & React libraryAPI Generated Docs

Interface: GraphConfigInterface

Properties

enableSimulation

enableSimulation: boolean

If set to false, the simulation will not run. Can be toggled at runtime using setConfig or setConfigPartial. Default value: true


transitionDuration

transitionDuration: number

Transition duration in milliseconds. Default value: 800

Note

When a position transition is triggered via setPointPositions(), the simulation is automatically paused for the duration and remains paused afterwards so forces do not pull nodes away from the target layout. Call unpause() to resume the simulation explicitly.


transitionEasing

transitionEasing: TransitionEasing | "linear" | "quad-in" | "quad-out" | "quad-in-out" | "cubic-in" | "cubic-out" | "cubic-in-out" | "sin-in" | "sin-out" | "sin-in-out" | "exp-in" | "exp-out" | "exp-in-out" | "circle-in" | "circle-out" | "circle-in-out"

Easing curve for transitions. Default value: TransitionEasing.CubicInOut


onTransitionStart()?

optional onTransitionStart: () => void

Callback function that will be called when a transition starts. Default value: undefined

Returns

void


onTransition()?

optional onTransition: (progress) => void

Callback function that will be called on every transition frame. The progress value ranges from 0 to 1. Default value: undefined

Parameters

ParameterType
progressnumber

Returns

void


onTransitionEnd()?

optional onTransitionEnd: (interrupted) => void

Callback function that will be called when a transition ends. interrupted is true when a transition was replaced or aborted before completion. Default value: undefined

Parameters

ParameterType
interruptedboolean

Returns

void


onResize()?

optional onResize: (width, height) => void

Callback function that will be called after the canvas viewport changes size. Default value: undefined

Parameters

ParameterType
widthnumber
heightnumber

Returns

void


backgroundColor

backgroundColor: string | [number, number, number, number]

Canvas background color. Can be either a hex color string (e.g., ā€˜#b3b3b3’) or an array of RGBA values. Default value: ā€˜#222222’


spaceSize

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).


spaceDimensions

spaceDimensions: 2 | 3

Rendering and simulation space dimensionality. 2 — flat pan/zoom view (d3-zoom); 3 — perspective orbit camera (drag rotates, wheel/pinch dollies, Shift/Space + drag pans). The force simulation and its spatial structures run in the same dimensionality.

Independent of the ingested data: 2D positions viewed in 3D lie in the z = 0 plane, and 3D positions viewed in 2D are projected top-down (their z is preserved). Can be changed at runtime via setConfig / setConfigPartial to switch modes without re-ingesting data. Default value: 2


pointDefaultColor

pointDefaultColor: string | [number, number, number, number]

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 1. Default value: ā€˜#b3b3b3’


pointGreyoutColor?

optional pointGreyoutColor: string | [number, number, number, number]

The color to use for points when they are greyed out (when highlighting 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 1.

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 be multiplied with the final alpha of this color.

Default value: undefined


pointGreyoutOpacity?

optional pointGreyoutOpacity: number

Opacity of greyed-out points when highlighting is active. Range: 0 (fully transparent) to 1 (fully opaque). When set, used instead of pointOpacity for greyed-out points. Default value: undefined


pointDefaultSize

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


pointDefaultShape

pointDefaultShape: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | CosmographPointShape

The default shape to use for points when no point shapes are provided via setPointShapes(), or if the shape value in the array is undefined, null, or invalid. Accepts a PointShape enum value (e.g., PointShape.Circle), a plain number (e.g., 2), or a numeric string (e.g., "2"). Default value: PointShape.Circle


pointOpacity

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

pointSizeScale: number

Scale factor for the point size. Default value: 1


pointOcclusionCulling

pointOcclusionCulling: boolean

Enables the depth-based occlusion culling optimization that skips shading and blending of point fragments hidden underneath other opaque points. Greatly improves performance when many large opaque points overlap; rendering output stays visually identical (point edges remain antialiased and per-point translucent colors still blend correctly). When true, the optimization applies automatically whenever it is safe: in 2D mode (spaceDimensions: 2), while pointOpacity is 1 and highlightedPointIndices is not set. Outside those conditions rendering falls back to the standard single-pass path. Set to false to always use the standard single-pass rendering. Default value: true


pointDepthFade

pointDepthFade: number

3D depth cueing: fades point colors toward the background with distance from the camera, so nearer points visibly pop in front of farther ones. The value is the fade strength at the far edge of the scene, from 0 (disabled) to 1 (fully faded into the background). Only used in 3D mode (spaceDimensions: 3). Default value: 0.4


pointSphereShading

pointSphereShading: boolean

Shade circle points as lit spheres (impostor shading with a soft headlight) in 3D mode, so overlapping points read as separate volumes. Applies to circle-shaped points only; other shapes render flat as before. Only used in 3D mode (spaceDimensions: 3). Default value: false


hoveredPointCursor

hoveredPointCursor: string

Cursor style to use when hovering over a point Default value: auto


hoveredLinkCursor

hoveredLinkCursor: string

Cursor style to use when hovering over a link Default value: auto


renderHoveredPointRing

renderHoveredPointRing: boolean

Turns ring rendering around a point on hover on / off Default value: false


hoveredPointRingColor

hoveredPointRingColor: string | [number, number, number, number]

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

focusedPointRingColor: string | [number, number, number, number]

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?

optional focusedPointIndex: number

Set focus on a point by index. A ring will be rendered around the focused point. The focused ring is larger than outline rings to create a clear visual hierarchy. When set to undefined, no point is focused. Default value: undefined


highlightedPointIndices?

optional highlightedPointIndices: number[]

Array of point indices to highlight. When set, all points NOT in this array will be greyed out. An empty array [] activates highlighting with all points greyed out. Set to undefined to clear highlighting and show all points normally. Default value: undefined


outlinedPointIndices?

optional outlinedPointIndices: number[]

Array of point indices to draw an outline ring around. The outline ring is a circle rendered around the point regardless of the point’s shape. When a point is both outlined and greyed out (not highlighted), the ring color is dimmed to match. Default value: undefined


outlinedPointRingColor

outlinedPointRingColor: string | [number, number, number, number]

Color of the outline ring drawn around outlined points. Can be either a hex color string (e.g., ā€˜#b3b3b3’) or an array of RGBA values. Default value: 'white'


renderLinks: boolean

Turns link rendering on / off. Default value: true


linkDefaultColor

linkDefaultColor: string | [number, number, number, number]

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 1. Default value: ā€˜#666666’


linkOpacity

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

linkGreyoutOpacity: number

Greyed-out link opacity value when link highlighting is active. Default value: 0.1


highlightedLinkIndices?

optional highlightedLinkIndices: number[]

Array of link indices to highlight. When set, all links NOT in this array will be greyed out. An empty array [] activates highlighting with all links greyed out. Set to undefined to clear highlighting and show all links normally. Link highlighting is independent of point highlighting. Default value: undefined


focusedLinkIndex?

optional focusedLinkIndex: number

Set focus on a link by index. The focused link will be rendered with extra width. When set to undefined, no link is focused. Default value: undefined


focusedLinkWidthIncrease

focusedLinkWidthIncrease: number

Number of pixels to add to the link width when focused. The focused width is calculated as: originalWidth + focusedLinkWidthIncrease Default value: 5


linkDefaultWidth

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


linkDefaultStyle

linkDefaultStyle: "0" | "1" | "2" | LinkStyle

The default style (stroke pattern) to use for links when no link styles are provided via setLinkStyles(), or if the style value in the array is undefined, null, or invalid. Accepts a LinkStyle enum value (e.g., LinkStyle.Solid), a plain number (e.g., 1), or a numeric string (e.g., "1"). 0 = Solid, 1 = Dashed, 2 = Dotted. Default value: LinkStyle.Solid


linkDashLength

linkDashLength: number

Dash length for dashed links (LinkStyle.Dashed). When scaleLinksOnZoom is false (default), this is a size in screen pixels: dashes keep a constant on-screen size, but the pattern shifts along a link as its on-screen length changes with zoom. When scaleLinksOnZoom is true, it is measured in graph space, which locks the pattern to the link so it scales with zoom instead of shifting. Default value: 8


linkDashGap

linkDashGap: number

Gap between dashes (dashed links) or between dots (dotted links). Uses the same units as linkDashLength — screen pixels, or graph space when scaleLinksOnZoom is true. Default value: 4


linkColorInterpolateFromEndpoints

linkColorInterpolateFromEndpoints: boolean

If true, each link’s color is interpolated along its length from the color of its source point to the color of its target point (derived from the point colors set via setPointColors()). This overrides the per-link RGB color from setLinkColors() (link opacity, greyout, and hover still apply). It works orthogonally to the link stroke pattern, so a dashed or dotted link can also be a gradient. Note: on curved links the gradient (and dash/dot spacing) is approximate. Default value: false


hoveredLinkColor?

optional hoveredLinkColor: string | [number, number, number, number]

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 1. Default value: undefined


hoveredLinkWidthIncrease

hoveredLinkWidthIncrease: number

Number of pixels to add to the link width when hovered. The hovered width is calculated as: originalWidth + hoveredLinkWidthIncrease Default value: 5


linkWidthScale

linkWidthScale: number

Scale factor for the link width. Default value: 1


scaleLinksOnZoom

scaleLinksOnZoom: boolean

Increase or decrease the size of the links when zooming in or out. Default value: false


linkBlending

linkBlending: boolean

Controls alpha blending for link rendering.

When true (default), links are drawn with standard source-over alpha blending, which is required for transparency, opacity, and antialiased link edges. When false, links are drawn opaque with hard edges (faster for dense graphs). Default value: true


curvedLinks: boolean

If set to true, links are rendered as curved lines. Otherwise as straight lines. Default value: false


curvedLinkSegments

curvedLinkSegments: number

Number of segments in a curved line. Default value: 19.


curvedLinkWeight

curvedLinkWeight: number

Weight affects the shape of the curve. Default value: 0.8.


curvedLinkControlPointDistance

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

linkDefaultArrows: boolean

The default link arrow value that controls whether or not to display link arrows. Default value: false


linkArrowsSizeScale

linkArrowsSizeScale: number

Scale factor for the link arrows size. Default value: 1


linkVisibilityDistanceRange

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

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

simulationDecay: number

Decay coefficient. Use smaller values if you want the simulation to ā€œcool downā€ slower. Default value: 5000


simulationGravity

simulationGravity: number

Gravity force coefficient. Default value: 0.25


simulationCenter

simulationCenter: number

Centering to center mass force coefficient. Default value: 0


simulationRepulsion

simulationRepulsion: number

Repulsion force coefficient. Default value: 1.0


simulationRepulsionTheta

simulationRepulsionTheta: number

Deprecated

No longer used. The many-body force now repels close points individually — a grid pyramid closed by an unbiased Monte-Carlo near field that stays exact while cells are sparse and only approximates once a cell holds more points than sampling slots — so there is no theta approximation to tune. This option is kept for backward compatibility and has no effect. Default value: 1.15


simulationLinkSpring

simulationLinkSpring: number

Link spring force coefficient. Default value: 1


simulationLinkDistance

simulationLinkDistance: number

Minimum link distance. Default value: 10


simulationLinkDistRandomVariationRange

simulationLinkDistRandomVariationRange: number[]

Range of random link distance values. Default value: [1, 1.2]


simulationFriction

simulationFriction: number

Friction coefficient. Values range from 0 (high friction, stops quickly) to 1 (no friction, keeps moving). Default value: 0.85


simulationCluster

simulationCluster: number

Cluster coefficient. Default value: 0.1


simulationCollision

simulationCollision: number

Collision force coefficient. When set to a value greater than 0, points will push each other apart when they overlap. Uses a spatial-hash grid, so it scales better than naive O(n²) collision. Default value: 0


simulationCollisionRadius

simulationCollisionRadius: number | undefined

Collision radius. When set to undefined or 0, the collision radius is derived from point sizes (half of the point size). When set to a positive value, all points use this fixed collision radius. Default value: undefined


simulationCollisionPadding

simulationCollisionPadding: number

Extra padding added to each point’s collision radius, in space units. Without padding, points settle just touching; with padding, two points keep a gap of twice this value between their visual edges. Default value: 0


simulationCollisionIterations

simulationCollisionIterations: number

Number of collision relaxation iterations per simulation tick. Higher values make the collision constraint stiffer and more responsive (overlaps resolve faster), at a linear performance cost in the collision step. Similar to d3-force’s collide.iterations. Default value: 1


simulationAlphaOnDrag

simulationAlphaOnDrag: number

Simulation re-heat on point drag. When the user starts dragging a point and the simulation is enabled, alpha is raised to at least this value and the simulation is restarted if it was paused or had settled, so the surrounding points react to the dragged point (similar to d3-force’s alphaTarget pattern on drag start). Set to 0 to disable. Default value: 0.3


onSimulationStart()?

optional onSimulationStart: () => void

Callback function that will be called when the simulation starts. Default value: undefined

Returns

void


onSimulationTick()?

optional onSimulationTick: (alpha, hoveredIndex?, pointPosition?) => void

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: [x, y] | undefined) => void. Default value: undefined

Parameters

ParameterType
alphanumber
hoveredIndex?number
pointPosition?HoveredPointPosition

Returns

void


onSimulationEnd()?

optional onSimulationEnd: () => void

Callback function that will be called when the simulation stops. Default value: undefined

Returns

void


onSimulationPause()?

optional onSimulationPause: () => void

Callback function that will be called when the simulation gets paused. Default value: undefined

Returns

void


onSimulationUnpause()?

optional onSimulationUnpause: () => void

Callback function that will be called when the simulation is unpaused. Default value: undefined

Returns

void


onClick()?

optional onClick: (index, pointPosition, event) => void

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 ([x, y] in 2D mode, [x, y, z] in 3D mode) and the corresponding mouse event as the third argument: (index: number | undefined, pointPosition: [x, y] | [x, y, z] | undefined, event: MouseEvent) => void. Default value: undefined

Parameters

ParameterType
indexnumber | undefined
pointPositionHoveredPointPosition | undefined
eventMouseEvent

Returns

void


onPointClick()?

optional onPointClick: (index, pointPosition, event) => void

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 ([x, y] in 2D mode, [x, y, z] in 3D mode) and the corresponding mouse event as the third argument: (index: number, pointPosition: [x, y] | [x, y, z], event: MouseEvent) => void. Default value: undefined

Parameters

ParameterType
indexnumber
pointPositionHoveredPointPosition
eventMouseEvent

Returns

void


onLinkClick()?

optional onLinkClick: (linkIndex, event) => void

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

Parameters

ParameterType
linkIndexnumber
eventMouseEvent

Returns

void


onBackgroundClick()?

optional onBackgroundClick: (event) => void

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

Parameters

ParameterType
eventMouseEvent

Returns

void


onContextMenu()?

optional onContextMenu: (index, pointPosition, event) => void

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 ([x, y] in 2D mode, [x, y, z] in 3D mode) and the corresponding mouse event as the third argument: (index: number | undefined, pointPosition: [x, y] | [x, y, z] | undefined, event: MouseEvent) => void. Default value: undefined

Parameters

ParameterType
indexnumber | undefined
pointPositionHoveredPointPosition | undefined
eventMouseEvent

Returns

void


onPointContextMenu()?

optional onPointContextMenu: (index, pointPosition, event) => void

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 ([x, y] in 2D mode, [x, y, z] in 3D mode) and the corresponding mouse event as the third argument: (index: number, pointPosition: [x, y] | [x, y, z], event: MouseEvent) => void. Default value: undefined

Parameters

ParameterType
indexnumber
pointPositionHoveredPointPosition
eventMouseEvent

Returns

void


onLinkContextMenu()?

optional onLinkContextMenu: (linkIndex, event) => void

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

Parameters

ParameterType
linkIndexnumber
eventMouseEvent

Returns

void


onBackgroundContextMenu()?

optional onBackgroundContextMenu: (event) => void

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

Parameters

ParameterType
eventMouseEvent

Returns

void


onMouseMove()?

optional onMouseMove: (index, pointPosition, event) => void

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 ([x, y] in 2D mode, [x, y, z] in 3D mode) and the corresponding mouse event as the third argument: (index: number | undefined, pointPosition: [x, y] | [x, y, z] | undefined, event: MouseEvent) => void. Default value: undefined

Parameters

ParameterType
indexnumber | undefined
pointPositionHoveredPointPosition | undefined
eventMouseEvent

Returns

void


onPointMouseOver()?

optional onPointMouseOver: (index, pointPosition, event, isHighlighted, isOutlined) => void

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, whether the hovered point is highlighted as the fourth argument, and whether the hovered point is outlined as the fifth argument: (index, pointPosition, event, isHighlighted, isOutlined) => void. Default value: undefined

Parameters

ParameterType
indexnumber
pointPositionHoveredPointPosition
eventMouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined
isHighlightedboolean
isOutlinedboolean

Returns

void


onPointMouseOut()?

optional onPointMouseOut: (event) => void

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> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void. Default value: undefined

Parameters

ParameterType
eventMouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined

Returns

void


onLinkMouseOver()?

optional onLinkMouseOver: (linkIndex) => void

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

Parameters

ParameterType
linkIndexnumber

Returns

void


onLinkMouseOut()?

optional onLinkMouseOut: (event) => void

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 | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void. Default value: undefined

Parameters

ParameterType
eventMouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined

Returns

void


onZoomStart()?

optional onZoomStart: (e, userDriven) => void

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

Parameters

ParameterType
eD3ZoomEvent<HTMLCanvasElement, undefined>
userDrivenboolean

Returns

void


onZoom()?

optional onZoom: (e, userDriven) => void

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

Parameters

ParameterType
eD3ZoomEvent<HTMLCanvasElement, undefined>
userDrivenboolean

Returns

void


onZoomEnd()?

optional onZoomEnd: (e, userDriven) => void

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

Parameters

ParameterType
eD3ZoomEvent<HTMLCanvasElement, undefined>
userDrivenboolean

Returns

void


onDragStart()?

optional onDragStart: (e) => void

Callback function that will be called when dragging starts. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined

Parameters

ParameterType
eD3DragEvent<HTMLCanvasElement, undefined, Hovered>

Returns

void


onDrag()?

optional onDrag: (e) => void

Callback function that will be called continuously during dragging. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined

Parameters

ParameterType
eD3DragEvent<HTMLCanvasElement, undefined, Hovered>

Returns

void


onDragEnd()?

optional onDragEnd: (e) => void

Callback function that will be called when dragging ends. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined

Parameters

ParameterType
eD3DragEvent<HTMLCanvasElement, undefined, Hovered>

Returns

void


showFPSMonitor

showFPSMonitor: boolean

Show WebGL performance monitor. Default value: false


pixelRatio

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 || 2


scalePointsOnZoom

scalePointsOnZoom: boolean

Increase or decrease the size of the points when zooming in or out. Default value: false


initialZoomLevel?

optional initialZoomLevel: number

Initial zoom level. This property will be applied only on component initialization and it can’t be changed using the setConfig or setConfigPartial methods. If set, fitViewOnInit value will be ignored. Default value: undefined


enableZoom

enableZoom: boolean

Enables or disables zooming in and out. Default value: true


enableSimulationDuringZoom

enableSimulationDuringZoom: boolean

Controls whether the simulation remains active during interactive (user-driven) zoom operations. When set to true, the simulation continues running while zooming. When set to false, the simulation pauses during zoom operations. Programmatic zoom methods (e.g., zoomToPointByIndex, fitView) default to running the simulation regardless of this setting, but can be controlled via their enableSimulation parameter. Default value: false


enableDrag

enableDrag: boolean

Enables or disables dragging of points in the graph. Default value: false


fitViewOnInit

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

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

fitViewPadding: number

Padding to apply when fitting the view to show all points. This value should be between 0 and 1, and 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

fitViewDuration: number

Duration in milliseconds for fitting the view to show all points when fitViewOnInit is enabled. Default: 250


fitViewByPointsInRect?

optional fitViewByPointsInRect: [number, number][] | [[number, number], [number, number]]

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?

optional fitViewByPointIndices: number[]

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?

optional randomSeed: string | number

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 or setConfigPartial methods. Default value: undefined


pointSamplingDistance

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: 100


linkSamplingDistance

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: 100


rescalePositions?

optional rescalePositions: boolean

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

Default value: undefined


attribution

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

This property is applied only on component initialization and can’t be changed using the setConfig or setConfigPartial methods.

Default value: ''


cameraFov

cameraFov: number

Vertical field of view of the 3D camera in degrees. Only used when spaceDimensions is 3. Default value: 45


cameraNear?

optional cameraNear: number

Near clipping plane distance of the 3D camera. When undefined, the near plane adapts to the camera distance and the extent of the data, keeping depth-buffer precision usable at any scene scale. Only used in 3D mode. Default value: undefined


cameraFar?

optional cameraFar: number

Far clipping plane distance of the 3D camera. When undefined, the far plane is derived automatically from the camera distance and the extent of the data. Only used in 3D mode. Default value: undefined


cameraInitialPosition?

optional cameraInitialPosition: [number, number, number]

Initial eye position of the 3D camera as [x, y, z], applied when entering 3D mode. The camera looks at the center of the data bounds from this position. When undefined, the camera frames the data bounds automatically (like fitView). Only used in 3D mode. Default value: undefined