Link Rendering
Each node in the graph can be connected to other nodes via links. Here, you can find how you can customize these links, including their width and whether arrows are rendered.
Link Width
Section titled “Link Width”The linkWidth determines the width of the links between nodes.
The higher the value, the thicker the links.
{ "graphConfig": { "linkWidth": 1 }}{ "/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/"] }}{ "graphConfig": { "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": false, "enableZoom": false, "enablePan": false, "enableHover": true, "enableClick": "disable", "depth": 1, "depthDirection": "both", "followLink": "same", "scale": 1.2, "minZoom": 0.05, "maxZoom": 4, "renderLabels": true, "renderArrows": true, "renderUnresolved": false, "renderExternal": true, "scaleLinks": true, "scaleArrows": true, "minZoomArrows": 0.8, "labelOpacityScale": 2, "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 }, "sitemapConfig": {}, "backlinksConfig": {}}Link Hover Width
Section titled “Link Hover Width”The linkHoverWidth determines the width of the links between nodes when hovered over.
The higher the value, the thicker the links.
{ "graphConfig": { "linkHoverWidth": 1 }}{ "/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/"] }}{ "graphConfig": { "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": false, "enableZoom": false, "enablePan": false, "enableHover": true, "enableClick": "disable", "depth": 1, "depthDirection": "both", "followLink": "same", "scale": 1.2, "minZoom": 0.05, "maxZoom": 4, "renderLabels": true, "renderArrows": true, "renderUnresolved": false, "renderExternal": true, "scaleLinks": true, "scaleArrows": true, "minZoomArrows": 0.8, "labelOpacityScale": 2, "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 }, "sitemapConfig": {}, "backlinksConfig": {}}Arrow Rendering
Section titled “Arrow Rendering”The renderArrows option toggles the rendering of arrows on the edges of the graph.
When arrows are rendered, they indicate the direction of the link between nodes.
{ "graphConfig": { "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/"] }}{ "graphConfig": { "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": false, "enableZoom": false, "enablePan": false, "enableHover": true, "enableClick": "disable", "depth": 1, "depthDirection": "both", "followLink": "same", "scale": 1.2, "minZoom": 0.05, "maxZoom": 4, "renderLabels": true, "renderArrows": true, "renderUnresolved": false, "renderExternal": true, "scaleLinks": true, "scaleArrows": true, "minZoomArrows": 0.8, "labelOpacityScale": 2, "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 }, "sitemapConfig": {}, "backlinksConfig": {}}Arrow Size
Section titled “Arrow Size”The arrowSize determines the size of the arrows on the links between nodes.
The higher the value, the larger the arrows.
Arrows between links are only rendered if the renderArrows option is enabled.
{ "graphConfig": { "renderArrows": true, "arrowSize": 5 }}{ "/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/"] }}{ "graphConfig": { "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": false, "enableZoom": false, "enablePan": false, "enableHover": true, "enableClick": "disable", "depth": 1, "depthDirection": "both", "followLink": "same", "scale": 1.2, "minZoom": 0.05, "maxZoom": 4, "renderLabels": true, "renderArrows": true, "renderUnresolved": false, "renderExternal": true, "scaleLinks": true, "scaleArrows": true, "minZoomArrows": 0.8, "labelOpacityScale": 2, "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 }, "sitemapConfig": {}, "backlinksConfig": {}}Arrow Angle
Section titled “Arrow Angle”The arrowAngle determines the ‘pointiness’ of the arrows on the links between nodes.
The higher the value, the pointier the arrows.
Arrows between links are only rendered if the renderArrows option is enabled.
{ "graphConfig": { "renderArrows": true, "arrowAngle": 0.5235987755982988 }}{ "/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/"] }}{ "graphConfig": { "actions": [], "tagStyles": {}, "tagRenderMode": "none", "enableDrag": false, "enableZoom": false, "enablePan": false, "enableHover": true, "enableClick": "disable", "depth": 1, "depthDirection": "both", "followLink": "same", "scale": 1.2, "minZoom": 0.05, "maxZoom": 4, "renderLabels": true, "renderArrows": true, "renderUnresolved": false, "renderExternal": true, "scaleLinks": true, "scaleArrows": true, "minZoomArrows": 0.8, "labelOpacityScale": 2, "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 }, "sitemapConfig": {}, "backlinksConfig": {}}