Node Styling
Here, you can find all configuration options related to the styling of nodes in the site graph.
Basic Node
This is the styling of a basic node, with no additional styles applied to it. Familiarize yourself with its shape, color, and size, before you move on to more advanced styles.
{}
{ "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": 3, "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}
Shape Config
You can change the shape of the node by setting the shape
property.
When using the polygon
or star
shape, you can also set the number of points using the shapePoints
property;
this property is ignored for other shapes.
{ "nodeDefaultStyle": { "shape": "square", "shapePoints": 0 }}
{ "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": 3, "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": "square", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1, "neighborScale": 0.5, "shapePoints": 0 }, "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}
Size Config
You can change the size of the node by setting the shapeSize
property.
{ "nodeDefaultStyle": { "shapeSize": 10 }}
{ "node/": { "title": "Node", "exists": true, "links": [], "backlinks": [] }, "other-node/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Other 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, "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": 5, "linkDistance": 0, "alphaDecay": 0.0228, "visibilityRules": [ "**/*" ], "prefetchPages": false}
Color Config
You can change the color of the node by setting the shapeColor
property.
{ "nodeDefaultStyle": { "shapeColor": "nodeColor" }}
{ "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": 3, "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}
Shape Rotation
You can change the rotation of the node by setting the shapeRotation
property.
This property can either receive a number input (in degrees), or random
to randomize the rotation of the node.
{ "nodeDefaultStyle": { "shapeRotation": 72, "shape": "star", "shapePoints": 5 }}
{ "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": 3, "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": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1, "neighborScale": 0.5, "shapeRotation": 72, "shapePoints": 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}
Corner Radius
You can change the corner radius of the node by setting the cornerRadius
property,
which works similarly to the CSS border-radius
property.
This property is only applicable to polygon or star derived shapes (e.g. square
, triangle
, polygon
, star
).
Input can either be a number (in pixels), or a string with a percentage value (e.g. “5.3%”).
{ "nodeDefaultStyle": { "shape": "square", "shapeCornerRadius": "4%", "cornerType": "round" }}
{ "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": 3, "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": "square", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1, "neighborScale": 0.5, "shapeCornerRadius": "4%", "cornerType": "round" }, "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}
Shape Stroke
You can change the stroke of the node by setting the strokeWidth
, strokeColor
, and strokeRadius
properties.
{ "nodeDefaultStyle": { "shape": "square", "shapeColor": "nodeColor2", "strokeWidth": 2, "strokeColor": "inherit", "strokeCornerRadius": "4%", "cornerType": "round" }}
{ "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": 3, "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": "square", "shapeColor": "nodeColor2", "shapeSize": 10, "strokeWidth": 2, "colliderScale": 1, "nodeScale": 1, "neighborScale": 0.5, "strokeColor": "inherit", "strokeCornerRadius": "4%", "cornerType": "round" }, "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}
Collider Scaling
You can change how much the size of the node’s collider should be scaled by, by setting the colliderScale
property.
{ "repelForce": 0.1, "nodeDefaultStyle": { "colliderScale": 1 }}
{ "node/": { "title": "Node", "exists": true, "links": [], "backlinks": [] }, "node1/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node1", "exists": true, "links": [], "backlinks": [] }, "node2/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node2", "exists": true, "links": [], "backlinks": [] }, "node3/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node3", "exists": true, "links": [], "backlinks": [] }, "node4/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node4", "exists": true, "links": [], "backlinks": [] }, "node5/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node5", "exists": true, "links": [], "backlinks": [] }, "node6/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node6", "exists": true, "links": [], "backlinks": [] }, "node7/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node7", "exists": true, "links": [], "backlinks": [] }, "node8/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node8", "exists": true, "links": [], "backlinks": [] }, "node9/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node9", "exists": true, "links": [], "backlinks": [] }, "node10/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node10", "exists": true, "links": [], "backlinks": [] }, "node11/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node11", "exists": true, "links": [], "backlinks": [] }, "node12/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node12", "exists": true, "links": [], "backlinks": [] }, "node13/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node13", "exists": true, "links": [], "backlinks": [] }, "node14/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node14", "exists": true, "links": [], "backlinks": [] }, "node15/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node15", "exists": true, "links": [], "backlinks": [] }, "node16/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node16", "exists": true, "links": [], "backlinks": [] }, "node17/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node17", "exists": true, "links": [], "backlinks": [] }, "node18/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node18", "exists": true, "links": [], "backlinks": [] }, "node19/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node19", "exists": true, "links": [], "backlinks": [] }, "node20/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node20", "exists": true, "links": [], "backlinks": [] }, "node21/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node21", "exists": true, "links": [], "backlinks": [] }, "node22/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node22", "exists": true, "links": [], "backlinks": [] }, "node23/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node23", "exists": true, "links": [], "backlinks": [] }, "node24/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node24", "exists": true, "links": [], "backlinks": [] }, "node25/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node25", "exists": true, "links": [], "backlinks": [] }, "node26/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node26", "exists": true, "links": [], "backlinks": [] }, "node27/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node27", "exists": true, "links": [], "backlinks": [] }, "node28/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node28", "exists": true, "links": [], "backlinks": [] }, "node29/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node29", "exists": true, "links": [], "backlinks": [] }, "node30/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node30", "exists": true, "links": [], "backlinks": [] }, "node31/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node31", "exists": true, "links": [], "backlinks": [] }, "node32/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node32", "exists": true, "links": [], "backlinks": [] }, "node33/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node33", "exists": true, "links": [], "backlinks": [] }, "node34/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node34", "exists": true, "links": [], "backlinks": [] }, "node35/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node35", "exists": true, "links": [], "backlinks": [] }, "node36/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node36", "exists": true, "links": [], "backlinks": [] }, "node37/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node37", "exists": true, "links": [], "backlinks": [] }, "node38/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node38", "exists": true, "links": [], "backlinks": [] }, "node39/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Node39", "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": 0.7, "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": 0.1, "linkDistance": 0, "alphaDecay": 0.0228, "visibilityRules": [ "**/*" ], "prefetchPages": false}
Node Scaling
You can change how much a node is scaled with respect to the shapeSize
property,
by setting the nodeScale
property.
{ "scale": 1, "nodeDefaultStyle": { "shapeSize": 10, "nodeScale": 1 }}
{ "node/": { "title": "Node", "exists": true, "links": [], "backlinks": [] }, "other-node/": { "nodeStyle": { "shape": "star", "shapeColor": "nodeColor", "shapeSize": 10, "strokeWidth": 0, "colliderScale": 1, "nodeScale": 1.6, "neighborScale": 0.5, "shapeRotation": "random", "shapeCornerRadius": "25%", "cornerType": "round" }, "title": "Other 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, "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": 5, "linkDistance": 0, "alphaDecay": 0.0228, "visibilityRules": [ "**/*" ], "prefetchPages": false}
Neighbor Scaling
A node can have different amount of links compared to other nodes.
If you want a node to be larger than its surrounding nodes if it has more links,
you can do so by increasing the neighborScale
property.
{ "scale": 1, "nodeDefaultStyle": { "neighborScale": 1 }}
{ "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": "disable", "depth": 8, "depthDirection": "both", "followLink": "same", "scale": 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": 1 }, "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}