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()?
optionalonTransitionStart: () =>void
Callback function that will be called when a transition starts.
Default value: undefined
Returns
void
onTransition()?
optionalonTransition: (progress) =>void
Callback function that will be called on every transition frame.
The progress value ranges from 0 to 1.
Default value: undefined
Parameters
| Parameter | Type |
|---|---|
progress | number |
Returns
void
onTransitionEnd()?
optionalonTransitionEnd: (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
| Parameter | Type |
|---|---|
interrupted | boolean |
Returns
void
onResize()?
optionalonResize: (width,height) =>void
Callback function that will be called after the canvas viewport changes size.
Default value: undefined
Parameters
| Parameter | Type |
|---|---|
width | number |
height | number |
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?
optionalpointGreyoutColor: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?
optionalpointGreyoutOpacity: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?
optionalfocusedPointIndex: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?
optionalhighlightedPointIndices: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?
optionaloutlinedPointIndices: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
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?
optionalhighlightedLinkIndices: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?
optionalfocusedLinkIndex: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?
optionalhoveredLinkColor: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
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()?
optionalonSimulationStart: () =>void
Callback function that will be called when the simulation starts.
Default value: undefined
Returns
void
onSimulationTick()?
optionalonSimulationTick: (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
| Parameter | Type |
|---|---|
alpha | number |
hoveredIndex? | number |
pointPosition? | HoveredPointPosition |
Returns
void
onSimulationEnd()?
optionalonSimulationEnd: () =>void
Callback function that will be called when the simulation stops.
Default value: undefined
Returns
void
onSimulationPause()?
optionalonSimulationPause: () =>void
Callback function that will be called when the simulation gets paused.
Default value: undefined
Returns
void
onSimulationUnpause()?
optionalonSimulationUnpause: () =>void
Callback function that will be called when the simulation is unpaused.
Default value: undefined
Returns
void
onClick()?
optionalonClick: (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
| Parameter | Type |
|---|---|
index | number | undefined |
pointPosition | HoveredPointPosition | undefined |
event | MouseEvent |
Returns
void
onPointClick()?
optionalonPointClick: (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
| Parameter | Type |
|---|---|
index | number |
pointPosition | HoveredPointPosition |
event | MouseEvent |
Returns
void
onLinkClick()?
optionalonLinkClick: (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
| Parameter | Type |
|---|---|
linkIndex | number |
event | MouseEvent |
Returns
void
onBackgroundClick()?
optionalonBackgroundClick: (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
| Parameter | Type |
|---|---|
event | MouseEvent |
Returns
void
onContextMenu()?
optionalonContextMenu: (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
| Parameter | Type |
|---|---|
index | number | undefined |
pointPosition | HoveredPointPosition | undefined |
event | MouseEvent |
Returns
void
onPointContextMenu()?
optionalonPointContextMenu: (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
| Parameter | Type |
|---|---|
index | number |
pointPosition | HoveredPointPosition |
event | MouseEvent |
Returns
void
onLinkContextMenu()?
optionalonLinkContextMenu: (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
| Parameter | Type |
|---|---|
linkIndex | number |
event | MouseEvent |
Returns
void
onBackgroundContextMenu()?
optionalonBackgroundContextMenu: (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
| Parameter | Type |
|---|---|
event | MouseEvent |
Returns
void
onMouseMove()?
optionalonMouseMove: (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
| Parameter | Type |
|---|---|
index | number | undefined |
pointPosition | HoveredPointPosition | undefined |
event | MouseEvent |
Returns
void
onPointMouseOver()?
optionalonPointMouseOver: (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
| Parameter | Type |
|---|---|
index | number |
pointPosition | HoveredPointPosition |
event | MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined |
isHighlighted | boolean |
isOutlined | boolean |
Returns
void
onPointMouseOut()?
optionalonPointMouseOut: (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
| Parameter | Type |
|---|---|
event | MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined |
Returns
void
onLinkMouseOver()?
optionalonLinkMouseOver: (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
| Parameter | Type |
|---|---|
linkIndex | number |
Returns
void
onLinkMouseOut()?
optionalonLinkMouseOut: (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
| Parameter | Type |
|---|---|
event | MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined |
Returns
void
onZoomStart()?
optionalonZoomStart: (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
| Parameter | Type |
|---|---|
e | D3ZoomEvent<HTMLCanvasElement, undefined> |
userDriven | boolean |
Returns
void
onZoom()?
optionalonZoom: (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
| Parameter | Type |
|---|---|
e | D3ZoomEvent<HTMLCanvasElement, undefined> |
userDriven | boolean |
Returns
void
onZoomEnd()?
optionalonZoomEnd: (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
| Parameter | Type |
|---|---|
e | D3ZoomEvent<HTMLCanvasElement, undefined> |
userDriven | boolean |
Returns
void
onDragStart()?
optionalonDragStart: (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
| Parameter | Type |
|---|---|
e | D3DragEvent<HTMLCanvasElement, undefined, Hovered> |
Returns
void
onDrag()?
optionalonDrag: (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
| Parameter | Type |
|---|---|
e | D3DragEvent<HTMLCanvasElement, undefined, Hovered> |
Returns
void
onDragEnd()?
optionalonDragEnd: (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
| Parameter | Type |
|---|---|
e | D3DragEvent<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?
optionalinitialZoomLevel: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?
optionalfitViewByPointsInRect: [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?
optionalfitViewByPointIndices: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?
optionalrandomSeed: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?
optionalrescalePositions: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 rescaledfalse: 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?
optionalcameraNear: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?
optionalcameraFar: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?
optionalcameraInitialPosition: [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