Interface Edge

The size of the arrow.

The colour of the element’s label.

A single value that overrides "control-point-step-size" with a manual value. Because it overrides the step size, bezier edges with the same value will overlap. Thus, it’s best to use this as a one- off value for particular edges if need be.

A series of values that specify for each control point the distance perpendicular to a line formed from source to target, e.g. -20 20 - 20.

From the line perpendicular from source to target, this value specifies the distance between successive bezier edges.

A single value that weights control points along the line from source to target. The value usually ranges on [0, 1], with 0 towards the source node and 1 towards the target node — but larger or smaller values can also be used.

A series of values that weights control points along a line from source to target, e.g. 0.25 0.5 0.75. A value usually ranges on [0, 1], with 0 towards the source node and 1 towards the target node — but larger or smaller values can also be used.

The curving method used to separate two or more edges between two nodes; may be

• haystack (default, very fast, bundled straight edges for which loops and compounds are unsupported),
• bezier(bundled curved edges),
• unbundled - bezier(curved edges for use with manual control points), or
• segments (a series of straight lines). Note that haystack edges work best with ellipse, rectangle, or similar nodes. Smaller node shapes, like triangle, will not be as aesthetically pleasing. Also note that edge arrows are unsupported for haystack edges.

Whether to display the element; may be element for displayed or none for not displayed. Note that a "display: none" bezier edge does not take up space in its bundle.

With value intersection (default), the line from source to target for "control-point-weight" is from the outside of the source node’s shape to the outside of the target node’s shape.With value node- position, the line is from the source position to the target position. The "node-position" option makes calculating edge points easier — but it should be used carefully because you can create invalid points that intersection would have automatically corrected.

Whether events should occur on an element (e.g.tap, mouseover, etc.).

• For "no", the element receives no events and events simply pass through to the core/viewport.

A comma-separated list of font names to use on the label text.

The size of the label text. https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

A CSS font style to be applied to the label text. https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

A CSS font weight to be applied to the label text.

A value between 0 and 1 inclusive that indicates the relative radius used to position haystack edges on their connected nodes. The outside of the node is at 1, and the centre of the node is at 0.

The text to display for an element’s label.

The cap of the edge's line.

The colour of the edge’s line.

The dashed line offset.

The dashed line pattern which specifies alternating lengths of lines and gaps.

The filling style of the edge's line.

The colors of the gradient stops.

The positions of the gradient stops. If not specified (or invalid), the stops will divide equally.

The line height of multiline text, as a relative, unitless value. It specifies the vertical spacing between each line. With value 1 (default), the lines are stacked directly on top of one another with no additional whitespace between them. With value 2, for example, there is whitespace between each line equal to the visible height of a line of text.

The opacity of the edge’s line and arrow. Useful if you wish to have a separate opacity for the edge label versus the edge line. Note that the opacity value of the edge element affects the effective opacity of its line and label subcomponents.

Value between 0 and 1 inclusive.

The style of the edge’s line.

Determines the angle that loops extend from the node in cases when the source and target node of an edge is the same. The angle is specified from the 12 o’clock position and it progresses clockwise for increasing positive values. The default is -45deg (extending to the upper left).

Determines the angle between the leaving and returning edges in loops. Positive values result in clockwise looping and negative values result in counter-clockwise looping. Default is -90deg.

The colour of the edge’s "mid-source" arrow.

The fill state of the edge’s mid-source arrow.

The shape of the edge’s mid-source arrow.

The colour of the edge’s "mid-target" arrow.

The fill state of the edge’s mid-target arrow.

The shape of the edge’s mid-target arrow.

If zooming makes the effective font size of the label smaller than this, then no label is shown.Note that because of performance optimisations, the label may be shown at font sizes slightly smaller than this value.

This effect is more pronounced at larger screen pixel ratios.However, it is guaranteed that the label will be shown at sizes equal to or greater than the value specified.

The opacity of the element, ranging from 0 to 1. Note that the opacity of a compound node parent affects the effective opacity of its children.

The colour of the overlay.

The opacity of the overlay.

The area outside of the element within which the overlay is shown.

A series of values that specify for each segment point the distance perpendicular to a line formed from source to target, e.g. -20 20 - 20.

A series of values that weights segment points along a line from source to target, e.g. 0.25 0.5 0.75.A value usually ranges on [0, 1], with 0 towards the source node and 1 towards the target node — but larger or smaller values can also be used.

The colour of the edge’s source arrow.

The fill state of the edge’s source arrow.

The shape of the edge’s source arrow.

The distance the edge ends from its source.

Specifies the endpoint of the source side of the edge

The text to display for an edge’s source label.

(For the source label of an edge.)

(For the source label of an edge.)

For the source label of an edge, how far from the source node the label should be placed.

(For the source label of an edge.)

The colour of the edge’s target arrow.

The fill state of the edge’s target arrow.

The shape of the edge’s target arrow.

The distance the edge ends from its target.

Specifies the endpoint of the target side of the edge

The text to display for an edge’s target label.

(For the target label of an edge.)

(For the target label of an edge.)

For the target label of an edge, how far from the target node the label should be placed.

(For the target label of an edge.)

The main direction of the edge, the direction starting out from the source node; may be one of:

• auto: Automatically use vertical or horizontal, based on whether the vertical or horizontal distance is largest.
• vertical: Automatically use downward or upward, based on the vertical direction from source to target.
• downward: Bundle outgoers downwards.
• upward: Bundle outgoers upwards.
• horizontal: Automatically use righward or leftward, based on the horizontal direction from source to target.
• rightward: Bundle outgoers righwards.
• leftward: Bundle outgoers leftwards.

The distance along the primary axis where the first turn is applied.

• This value may be an absolute distance (e.g. '20px') or it may be a relative distance between the source and target (e.g. '50%').
• A negative value may be specified to indicate a distance in the oppostite, target to source direction (e.g. '-20px').
• Note that bundling may not work with an explicit direction (upward, downward, leftward, or rightward) in tandem with a turn distance specified in percent units.

The minimum distance along the primary axis that is maintained between the nodes and the turns.

• This value only takes on absolute values (e.g. '5px').
• This property makes the taxi edge be re-routed when the turns would be otherwise too close to the source or target. As such, it also helps to avoid turns overlapping edge endpoint arrows.

A colour to apply on the text background.

The opacity of the label background; the background is disabled for 0 (default value).

The padding provides visual spacing between the text and the edge of the background.

The shape to use for the label background.

The colour of the border around the label.

The width of the border around the label; the border is disabled for 0 (default value).

The style of the border around the label.

The width of the border around the label.

Whether events should occur on an element if the label receives an event; may be yes or no. You may want a style applied to the text on active so you know the text is activatable.

The vertical alignment of a node’s label.

The justification of multiline (wrapped) labels; may be left, center, right, or auto (default). The auto value makes it so that a node’s label is justified along the node — e.g. a label on the right side of a node is left justified.

A margin that shifts the label along the x- axis.

A margin that shifts the label along the y- axis.

The maximum width for wrapped text, applied when "text-wrap" is set to wrap. For only manual newlines (i.e.\n), set a very large value like 1000px such that only your newline characters would apply.

The opacity of the label text, including its outline.

The colour of the outline around the element’s label text.

The opacity of the outline on label text.

The size of the outline on label text.

The characters that may be used for possible wrapping locations when a line overflows text-max-width; may be whitespace (default) or anywhere. Note that anywhere is suited to CJK, where the characters are in a grid and no whitespace exists. Using anywhere with text in the Latin alphabet, for example, will split words at arbitrary locations.

A rotation angle that is applied to the label.

• Rotations are clockwise.
• For edges, the special value autorotate can be used to align the label to the edge.
• For nodes, the label is rotated along its anchor point on the node, so a label margin may help for some usecases.
• The special value none can be used to denote 0deg.
• Rotations works best with left-to-right text.

A transformation to apply to the label text.

The vertical alignment of a node’s label.

A wrapping style to apply to the label text; may be

• "none" for no wrapping (including manual newlines ) or
• "wrap" for manual and/ or autowrapping.
• "ellipsis" to truncate the string and append

The length of the delay in seconds before the transition occurs (e.g. 250ms).

The length of the transition in seconds(e.g. 0.5s).

A comma separated list of style properties to animate in this state.

An easing function that controls the animation progress curve (a visualisation of easings serves as a reference).

Whether the element is visible; may be visible or hidden. Note that a "visibility : hidden" bezier edge still takes up space in its bundle.

The width of an edge’s line.

May be bottom, orphan, auto (default), or top. The first drawn is bottom, the second is orphan, which is the same depth as the root of the compound graph, followed by the default of auto which draws in depth order from root to leaves of the compound graph. The last drawn is top. It does not usually make sense to set this value for non-compound graphs.

An integer value that affects the relative draw order of elements. In general, an element with a higher "z-index" will be drawn on top of an element with a lower "z-index". Note that edges are under nodes despite "z-index", except when necessary for compound nodes.

May be auto (default) or manual. The auto setting draws edges under nodes, whereas manual ignores this convention and draws solely based on the z-index value.