User Interactions
The user can interact with the graph in several ways, like zooming, dragging, pagging, hovering and clicking. Each individual action can be turned off, and some of the behaviour can also be customized.
Zooming
When the enableZoom configuration is enabled, the user can zoom in and out of the graph using the mouse wheel.
If enablePan is disabled, the zoom will be from the center of the graph, and not from the mouse cursor.
{ "enableZoom": 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": false, "enableHover": false, "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}Panning
When the enablePan configuration is enabled, the user can drag the graph around using the mouse.
{ "enablePan": true}{ "node/": { "links": [ "node-1/", "node-4/", "node-6/", "node-12/", "node-15/", "node-17/", "node-19/" ], "title": "Node", "exists": true, "backlinks": [ "node-10/", "node-15/" ] }, "node-1/": { "exists": true, "external": false, "links": [], "title": "Node 1", "backlinks": [ "node/", "node-2/" ] }, "node-2/": { "exists": true, "external": false, "links": [ "node-1/", "node-9/", "node-12/", "node-17/" ], "title": "Node 2", "backlinks": [ "node-8/", "node-14/" ] }, "node-3/": { "exists": true, "external": false, "links": [ "node-8/", "node-19/" ], "title": "Node 3", "backlinks": [ "node-8/", "node-17/", "node-18/" ] }, "node-4/": { "exists": true, "external": false, "links": [ "node-5/", "node-13/" ], "title": "Node 4", "backlinks": [ "node/", "node-12/" ] }, "node-5/": { "exists": true, "external": false, "links": [ "node-6/", "node-18/" ], "title": "Node 5", "backlinks": [ "node-4/", "node-15/" ] }, "node-6/": { "exists": true, "external": false, "links": [ "node-12/", "node-13/", "node-19/" ], "title": "Node 6", "backlinks": [ "node/", "node-5/", "node-16/" ] }, "node-7/": { "exists": true, "external": false, "links": [ "node-12/", "node-14/", "node-16/" ], "title": "Node 7", "backlinks": [ "node-11/", "node-15/", "node-18/" ] }, "node-8/": { "exists": true, "external": false, "links": [ "node-2/", "node-3/" ], "title": "Node 8", "backlinks": [ "node-3/" ] }, "node-9/": { "exists": true, "external": false, "links": [ "node-13/", "node-15/" ], "title": "Node 9", "backlinks": [ "node-2/", "node-14/", "node-18/" ] }, "node-10/": { "exists": true, "external": false, "links": [ "node/", "node-12/", "node-17/" ], "title": "Node 10", "backlinks": [] }, "node-11/": { "exists": true, "external": false, "links": [ "node-7/", "node-17/" ], "title": "Node 11", "backlinks": [] }, "node-12/": { "exists": true, "external": false, "links": [ "node-4/" ], "title": "Node 12", "backlinks": [ "node/", "node-2/", "node-6/", "node-7/", "node-10/" ] }, "node-13/": { "exists": true, "external": true, "links": [], "title": "Node 13", "backlinks": [ "node-4/", "node-6/", "node-9/", "node-15/" ] }, "node-14/": { "exists": true, "external": false, "links": [ "node-2/", "node-9/" ], "title": "Node 14", "backlinks": [ "node-7/" ] }, "node-15/": { "exists": true, "external": false, "links": [ "node/", "node-5/", "node-7/", "node-13/", "node-16/" ], "title": "Node 15", "backlinks": [ "node/", "node-9/" ] }, "node-16/": { "exists": true, "external": false, "links": [ "node-6/" ], "title": "Node 16", "backlinks": [ "node-7/", "node-15/" ] }, "node-17/": { "exists": true, "external": false, "links": [ "node-3/" ], "title": "Node 17", "backlinks": [ "node/", "node-2/", "node-10/", "node-11/" ] }, "node-18/": { "exists": true, "external": false, "links": [ "node-3/", "node-7/", "node-9/" ], "title": "Node 18", "backlinks": [ "node-5/" ] }, "node-19/": { "exists": true, "external": true, "links": [], "title": "Node 19", "backlinks": [ "node/", "node-3/", "node-6/" ] }}{ "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": false, "enableZoom": false, "enablePan": true, "enableHover": false, "enableClick": "disable", "depth": 2, "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}Dragging
When the enableDrag configuration is enabled, the user can drag nodes around the graph.
The dragged nodes will still be subject to the physics simulation, so they will eventually return to a stable position.
{ "enableDrag": true}{ "node/": { "backlinks": [ "node1/", "node2/", "node3/", "node4/", "node5/", "node6/" ], "title": "Node", "exists": true, "links": [] }, "node1/": { "links": [ "node/" ], "title": "Node1", "exists": true, "backlinks": [] }, "node2/": { "links": [ "node/" ], "title": "Node2", "exists": true, "backlinks": [] }, "node3/": { "links": [ "node/" ], "title": "Node3", "exists": true, "backlinks": [] }, "node4/": { "links": [ "node/" ], "title": "Node4", "exists": true, "backlinks": [] }, "node5/": { "links": [ "node/" ], "title": "Node5", "exists": true, "backlinks": [] }, "node6/": { "links": [ "node/" ], "title": "Node6", "exists": true, "backlinks": [] }}{ "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": true, "enableZoom": false, "enablePan": false, "enableHover": false, "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}Hovering
When the enableHover configuration is enabled, the user can hover over nodes to apply their hovered styles.
{ "enableHover": true}{ "node/": { "links": [ "node-1/", "node-4/", "node-6/", "node-12/", "node-15/", "node-17/", "node-19/" ], "title": "Node", "exists": true, "backlinks": [ "node-10/", "node-15/" ] }, "node-1/": { "exists": true, "external": false, "links": [], "title": "Node 1", "backlinks": [ "node/", "node-2/" ] }, "node-2/": { "exists": true, "external": false, "links": [ "node-1/", "node-9/", "node-12/", "node-17/" ], "title": "Node 2", "backlinks": [ "node-8/", "node-14/" ] }, "node-3/": { "exists": true, "external": false, "links": [ "node-8/", "node-19/" ], "title": "Node 3", "backlinks": [ "node-8/", "node-17/", "node-18/" ] }, "node-4/": { "exists": true, "external": false, "links": [ "node-5/", "node-13/" ], "title": "Node 4", "backlinks": [ "node/", "node-12/" ] }, "node-5/": { "exists": true, "external": false, "links": [ "node-6/", "node-18/" ], "title": "Node 5", "backlinks": [ "node-4/", "node-15/" ] }, "node-6/": { "exists": true, "external": false, "links": [ "node-12/", "node-13/", "node-19/" ], "title": "Node 6", "backlinks": [ "node/", "node-5/", "node-16/" ] }, "node-7/": { "exists": true, "external": false, "links": [ "node-12/", "node-14/", "node-16/" ], "title": "Node 7", "backlinks": [ "node-11/", "node-15/", "node-18/" ] }, "node-8/": { "exists": true, "external": false, "links": [ "node-2/", "node-3/" ], "title": "Node 8", "backlinks": [ "node-3/" ] }, "node-9/": { "exists": true, "external": false, "links": [ "node-13/", "node-15/" ], "title": "Node 9", "backlinks": [ "node-2/", "node-14/", "node-18/" ] }, "node-10/": { "exists": true, "external": false, "links": [ "node/", "node-12/", "node-17/" ], "title": "Node 10", "backlinks": [] }, "node-11/": { "exists": true, "external": false, "links": [ "node-7/", "node-17/" ], "title": "Node 11", "backlinks": [] }, "node-12/": { "exists": true, "external": false, "links": [ "node-4/" ], "title": "Node 12", "backlinks": [ "node/", "node-2/", "node-6/", "node-7/", "node-10/" ] }, "node-13/": { "exists": true, "external": true, "links": [], "title": "Node 13", "backlinks": [ "node-4/", "node-6/", "node-9/", "node-15/" ] }, "node-14/": { "exists": true, "external": false, "links": [ "node-2/", "node-9/" ], "title": "Node 14", "backlinks": [ "node-7/" ] }, "node-15/": { "exists": true, "external": false, "links": [ "node/", "node-5/", "node-7/", "node-13/", "node-16/" ], "title": "Node 15", "backlinks": [ "node/", "node-9/" ] }, "node-16/": { "exists": true, "external": false, "links": [ "node-6/" ], "title": "Node 16", "backlinks": [ "node-7/", "node-15/" ] }, "node-17/": { "exists": true, "external": false, "links": [ "node-3/" ], "title": "Node 17", "backlinks": [ "node/", "node-2/", "node-10/", "node-11/" ] }, "node-18/": { "exists": true, "external": false, "links": [ "node-3/", "node-7/", "node-9/" ], "title": "Node 18", "backlinks": [ "node-5/" ] }, "node-19/": { "exists": true, "external": true, "links": [], "title": "Node 19", "backlinks": [ "node/", "node-3/", "node-6/" ] }}{ "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": 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}Clicking
When the enableClick configuration is enabled, the user can click on nodes to follow the link to the node’s page.
This settings has four options:
auto: The default option, require a double click for the link to be followed on mobile devices, and a single click on desktop.disable: The link is never followed.click: The link is followed on a single click.dblclick: The link is followed on a double click.
{ "followLink": "graph", "enableClick": "auto", "enableHover": true}{ "node/": { "backlinks": [ "node1/", "node2/", "node3/", "node4/", "node5/", "node6/" ], "title": "Node", "exists": true, "links": [] }, "node1/": { "links": [ "node/" ], "title": "Node1", "exists": true, "backlinks": [] }, "node2/": { "links": [ "node/" ], "title": "Node2", "exists": true, "backlinks": [] }, "node3/": { "links": [ "node/" ], "title": "Node3", "exists": true, "backlinks": [] }, "node4/": { "links": [ "node/" ], "title": "Node4", "exists": true, "backlinks": [] }, "node5/": { "links": [ "node/" ], "title": "Node5", "exists": true, "backlinks": [] }, "node6/": { "links": [ "node/" ], "title": "Node6", "exists": true, "backlinks": [] }}{ "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": false, "enableZoom": false, "enablePan": false, "enableHover": true, "enableClick": "auto", "depth": 8, "depthDirection": "both", "followLink": "graph", "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}Link Following
The followLink configuration determines what happens when a node with a valid link is clicked.
same: The link is opened in the same tab.new-tab: The link is opened in a new tab.graph: The clicked node is set as the current node in the graph.
By default, a link is opened in the same tab. External links will always be opened in a new tab (regardless of this setting).
{ "followLink": "graph", "enableClick": "auto", "enableHover": true}{}{ "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": false, "enableZoom": false, "enablePan": false, "enableHover": true, "enableClick": "auto", "depth": 8, "depthDirection": "both", "followLink": "graph", "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}Page Prefetching
The prefetchPages configuration determines whether a page should be prefetched when it is hovered over.
Behind the scenes, this is calling Astro:prefetch’s prefetch method.