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.

Config

{
  "scale": 1.1
}

Sitemap

{
  "node/": {
    "title": "Node",
    "exists": true,
    "links": [],
    "backlinks": []
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": false,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColor"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.001,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

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.

Config

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

Sitemap

{
  "node/": {
    "title": "Node",
    "exists": true,
    "links": [],
    "backlinks": []
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": true,
  "enablePan": true,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": false,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColor"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.001,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

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.

Config

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

Sitemap

{
  "node/": {
    "title": "Node",
    "exists": true,
    "links": [],
    "backlinks": []
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": true,
  "enablePan": true,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": false,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColor"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.001,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

maxZoom 4

Zoom Duration

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

Config

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

Sitemap

{
  "node/": {
    "title": "Node",
    "exists": true,
    "links": [],
    "backlinks": []
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": true,
  "enablePan": true,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": false,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColor"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.001,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

zoomDuration 75

Zoom Easer

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

Config

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

Sitemap

{
  "node/": {
    "title": "Node",
    "exists": true,
    "links": [],
    "backlinks": []
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": true,
  "enablePan": true,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": false,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColor"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.001,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

Linear

Quadratic Ease In

Quadratic Ease Out

Quadratic Ease In Out

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.

Config

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

Sitemap

{
  "node/": {
    "links": [
      "other-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": [
      "another-node/"
    ]
  },
  "other-node/": {
    "links": [
      "another-node/"
    ],
    "title": "Other Node",
    "exists": true,
    "backlinks": [
      "node/"
    ]
  },
  "another-node/": {
    "links": [
      "node/"
    ],
    "title": "Another Node",
    "exists": true,
    "backlinks": [
      "other-node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": true,
  "enablePan": true,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

minZoomArrows 0.8

Scale Links

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.

Config

{
  "scaleLinks": true,
  "enableZoom": true,
  "enablePan": true
}

Sitemap

{
  "node/": {
    "links": [
      "other-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": [
      "another-node/"
    ]
  },
  "other-node/": {
    "links": [
      "another-node/"
    ],
    "title": "Other Node",
    "exists": true,
    "backlinks": [
      "node/"
    ]
  },
  "another-node/": {
    "links": [
      "node/"
    ],
    "title": "Another Node",
    "exists": true,
    "backlinks": [
      "other-node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": true,
  "enablePan": true,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

Scale Links

Do Not Scale Links

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.

Config

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

Sitemap

{
  "node/": {
    "links": [
      "other-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": [
      "another-node/"
    ]
  },
  "other-node/": {
    "links": [
      "another-node/"
    ],
    "title": "Other Node",
    "exists": true,
    "backlinks": [
      "node/"
    ]
  },
  "another-node/": {
    "links": [
      "node/"
    ],
    "title": "Another Node",
    "exists": true,
    "backlinks": [
      "other-node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": true,
  "enablePan": true,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

Scale Arrows

Do Not Scale Arrows