Skip to content
Starlight Site Graph

Zoom Logic

The zoom logic of the graph can be altered to allow for a different initial zoom level, a more restrictive zoom extent, snappier zoom animations, and changes in how the graph’s arrows and links are change when zooming.

Scale

The scale option determines the initial zoom level of the graph.

{
  "scale": 1.1
}
scale 1.1

Minimum Zoom

The minZoom option determines the minimum zoom level of the graph, the lowest zoom extent that the user can zoom out to. A higher value means that the user can zoom out less.

{
  "minZoom": 0.05,
  "enableZoom": true,
  "enablePan": true
}
minZoom 0.05

Maximum Zoom

The maxZoom option determines the maximum zoom level of the graph, the highest zoom extent that the user can zoom in to. A higher value means that the user can zoom in more.

{
  "maxZoom": 4,
  "enableZoom": true,
  "enablePan": true
}
maxZoom 4

Zoom Duration

The zoomDuration option determines the duration of the zoom animation in milliseconds. This includes zooming in, zooming out and panning.

{
  "zoomDuration": 75,
  "enableZoom": true,
  "enablePan": true
}
zoomDuration 75

Zoom Easer

The zoomEase option determines the easing function used for the zoom animation. This includes zooming in, zooming out and panning.

{
  "zoomEase": "out_quad",
  "enableZoom": true,
  "enablePan": true
}

Minimum Zoom Arrow Visibility

The minZoomArrows option determines at which zoom level the arrows on links should become visible. A high value means that the arrows will only be visible when the user has zoomed in quite a bit.

{
  "minZoomArrows": 0.8,
  "enableZoom": true,
  "enablePan": true,
  "renderArrows": true
}
minZoomArrows 0.8

The scaleLinks option determines whether the width of links between nodes should be scaled when zooming. This can be useful to keep the links consistent when zooming in or out.

Scale Arrows

The scaleArrows option determines whether the size of arrowheads on links should be scaled when zooming. This can be useful to keep the arrowheads consistent when zooming in or out.

{
  "scaleArrows": true,
  "enableZoom": true,
  "enablePan": true,
  "renderArrows": true
}