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}
{ "node/": { "title": "Node", "exists": true, "links": [], "backlinks": [] }}
{ "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": {}, "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}
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}
{ "node/": { "title": "Node", "exists": true, "links": [], "backlinks": [] }}
{ "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": {}, "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}
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}
{ "node/": { "title": "Node", "exists": true, "links": [], "backlinks": [] }}
{ "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": {}, "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}
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}
{ "node/": { "title": "Node", "exists": true, "links": [], "backlinks": [] }}
{ "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": {}, "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}
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}
{ "node/": { "title": "Node", "exists": true, "links": [], "backlinks": [] }}
{ "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": {}, "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}
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}
{ "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/" ] }}
{ "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
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.
{ "scaleLinks": true, "enableZoom": true, "enablePan": true}
{ "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/" ] }}
{ "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
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}
{ "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/" ] }}
{ "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}