Data Formats
Nodes, links and annotations in ReGraph are described as plain JavaScript objects whose properties configure the appearance of each item. Links also describe their relationship to other nodes.
Nodes, links and annotations are defined on the items prop of the chart and time bar components.
The formats below describe the data structures used to define items in the chart.
The following properties are common to nodes, links and annotations.
Nodes, also known as vertices, define a single entity within the graph. Nodes provide various properties to control their appearance.
A node can be a combo, which means it is a parent or container for other nodes. Combos can be in an open or closed state. Closed combos look just like regular nodes, but open combos only support the border, color and label properties.
In addition to all Item properties, nodes support the following properties:
object
default: No border Defines a border around a node. Set a color property to make a border appear.
<Chart items={{
node1: {
border: {
color: 'maroon'
}
}
}}
/> string The border color.
'solid' | 'dashed'
default: 'solid' The style of the border line.
number | string | number[] | object
default: 0 The radius of border corners. Use a number for equal radius for all corners, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as topLeft or bottomRight.
number
default: 4 The width of the border.
object An object describing the position of the node on the Leaflet map.
boolean
default: false Crops an image to a cutout circle. Affected by cross-origin restrictions and does not apply to font icons.
object An object describing a 'donut' border of segmented sections around the node. Doesn't apply to nodes with shape set to 'box'. If both donut and border are set then donut takes precedence.
object Defines the border between segments.
segments
required array Defines the segments of the donut.
number
default: 10 The width of the donut segments (excluding the border).
boolean
default: false Fades the item into the background. Can be used in the setStyle function passed to onItemInteraction to foreground items.
object The font icon to use on the node. Use imageAlignment for positioning and scaling.
<Chart items={{
node1: {
fontIcon: {
text: 'fas fa-user', // or '\u{f007}'
fontFamily: 'Font Awesome 5 Free',
},
},
node2: {
fontIcon: {
text: 'person',
fontFamily: 'Material Icons',
},
},
}}
/> string
default: 'black' The color of the font icon fill.
string The font family to use for the font icon. Defaults to the iconFontFamily option in the chart's options prop.
text
required string | number The text of the font icon to show. You can pass a CSS class name here which will be converted to a unicode character, or you can pass an escaped Unicode code point, e.g. '\u{f007}'.
Array of objects Adds halos to the node. Halos are concentric circles which are drawn around nodes. A node can have up to ten halos.
string The URL to the node image. Unavailable images are shown as a blue X. If requesting images directly from external domains, see Cross-Origin Images.
object | array of objects Defines one or more labels for a node as described in Node Label. Labels can be styled using an array of one or more objects which is in beta from v4.0. See also Node Styling.
'box' | 'circle' | object
default: 'circle' The node's shape. Can also be set to an object with parameters in world units to set a rectangular node.
height
required number | 'auto' The height of a rectangular node. Set to 'auto' to automatically size the height to contain all the inside labels.
number
default: 54 An optional parameter to set the minimum height of a rectangular node. If height is set to 'auto' and the content is smaller than the minimum height, the minimum height is applied.
number
default: 54 An optional parameter to set the minimum width of a rectangular node. If width is set to 'auto' and the content is smaller than the minimum width, the minimum width is applied.
width
required number | 'auto' The width of a rectangular node. Set to 'auto' to automatically size the width to contain all the inside labels.
number
default: 1 Scales the node size by an enlargement factor. Does not apply to nodes with width and height set in the shape property.
Array Associates timestamps with the item. A timestamp can represent a single moment or a period of time.
<TimeBar items={{
node1: {
times: [{ time: new Date(2019, 4, 1) }],
},
node2: {
times: [
{
time: {
start: 1554713715658,
end: 1558624743356,
},
},
],
},
}}
/> object | Date | number Set the time as a specific moment as a Date or a time in milliseconds. To specify a time interval, set the time as an object with start and end. If only start or end is provided, the interval is treated as an open interval.
number
default: 1 The value associated with a timestamp (for example, the amount of a transaction or the duration of a call).
Labels show information on nodes. Each node can have one or more labels associated with it. The label property accepts either:
- A single object,
- Beta An array of one or more objects, each of which defines one label.
See also Node Styling documentation.
string
default: 'rgba(255,255,255,0.6)' The label background color. Ignored if image is set.
boolean
default: false Whether the label should be displayed in bold font.
object
default: No border The border around the label.
string The border color.
number | string | number[] | object
default: 0 The radius of border corners. Use a number for equal radius for all corners, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as topLeft or bottomRight.
number
default: 4 The width of the border.
string
default: 'black' The color of the label font.
string The font family to use for the label. Defaults to the fontFamily property of the labels options in the chart's options prop.
object The label font icon. Use position and margin for positioning and offset and fontSize for scaling. If text is also set, only fontIcon is shown. If image is also set, fontIcon is ignored.
number | 'auto'
default: 14 The font size (px) of the label. Set to 'auto' to size the font automatically depending on the node size. Ignored if image is set.
string The URL to the label image. To specify image size, set both maxHeight and maxWidth. To set its position and offset within the node, use position and margin. Also supports border but other label customization properties are ignored.
number | string | number[] | object The space between the label and the next label or the parent node. Use a number for equal margin on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right.
number
default: 54 for images The height of the label container. For non-image labels, use this when fontSize is set to 'auto' to set the maximum height of the text. For image labels, if maxWidth is also set, specifies the height of the image.
number
default: 54 for images The width of the label container, defaulting to that of the parent node. For non-image labels, set this option when textWrap is set to 'normal' to reduce the maximum text width before a line break, or when fontSize is set to 'auto' to set the maximum text width. For image labels, if maxHeight is also set, specifies the width of the image.
number | 'stretch' The minimum height of the label container. It will increase to fit the content if necessary. When set to 'stretch', it fills the whole height of the parent node. Ignored if image is set.
number | 'stretch' The minimum width of the label container. It will increase to fit the content if necessary. When set to 'stretch', it fills the whole width of the parent node. Set to a number if textWrap is set to 'normal' to increase the minimum text width before a line break. Ignored if image is set.
number | string | number[] | object
default: '2 2 0 2' The space between the label border and the content inside the label. Use a number for equal padding on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right. Ignored if image is set.
string | object
default: { horizontal: 'center', vertical: 'middle' } The position of the label's top left corner relative to the top left node corner. Can either be a compass point string ( 'n', 'ne' etc.) to place the label outside the node, or an object with horizontal and/or vertical properties to place the label inside the node.
Default position for nodes and closed combos is in the middle and centre of the node. Default position for open combos is outside and below the combo.
horizontal
required number | 'left' | 'center' | 'right' The horizontal position. Can be a predefined string or a number in world coordinates.
vertical
required number | 'top' | 'middle' | 'bottom' | 'initial' | 'inherit' The vertical position. Can be a predefined string or a number in world coordinates.
string The label text. If either fontIcon or image is set, text is ignored.
object
default: { horizontal: 'center', vertical: 'middle' } The alignment of the content inside the label. Applies when labels are not sized automatically to their content due to minHeight and/or minWidth options set. Ignored if image is set.
horizontal
required 'left' | 'center' | 'right' The horizontal alignment.
vertical
required 'top' | 'middle' | 'bottom' The vertical alignment.
'normal' | 'initial'
default: 'initial' Text wrapping inside the label. By default, no text wrapping is used. If set to 'normal', the label content is wrapped on whitespaces created by the space bar. To control line breaks, use minWidth / maxWidth, or the '\n' or '\r' characters. To set a fixed width for a wrapped label, set both minWidth and maxWidth to the same value.
Links, also known as edges, connect two nodes together. A link must specify the ids of two connecting nodes.
In addition to all Item properties, links support the following properties:
object Sets the appearance of the link at the id1 end.
boolean
default: false Draws an arrowhead at the end of the link.
number
default: 0 The distance the link should back-off from the connected node, as a ratio of the total length of the link line. Value in the range 0 to 1.
string Sets the color of this end of the link. May be different to the other end, in which case the link will draw a gradient.
object Specifies the label at the end of the link.
object Sets the appearance of the link at the id2 end. Same options available as for end1.
boolean
default: false Fades the item into the background. Can be used in the setStyle function passed to onItemInteraction to foreground items.
boolean | object
default: { velocity: 2} Sets a flow animation on the link. Shown as dashed, overriding the lineStyle property.
number
default: 2 Sets the velocity of the flow along the link. Positive values flow from id1 to id2, and negative from id2 to id1. Should be in the range -10 to 10.
id1
required string The identity of the node at one end of the link.
id2
required string The identity of the node at the other end of the link. This may be the same as id1 to create a "self link".
object Places a label at the middle of the link.
string
default: 'rgba(255,255,255,0.6)' The label background color.
boolean
default: false Whether the label should be displayed in bold font.
object
default: No border The border around the link label. If set for multiline labels, merges all labels into a single label container.
string The border color.
number | string | number[] | object
default: 0 The radius of border corners. Use a number for equal radius for all corners, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as topLeft or bottomRight.
number
default: 4 The width of the border.
string
default: 'black' The color of the label font.
string The font family to use for the label. Defaults to the fontFamily property of the labels options in the chart's options prop.
number
default: 14 The font size (px) of the label text.
number | string | number[] | object
default: '2 2 0 2' The distance between the link label text and the label edge. Label borders are excluded. If used on multiline labels with border set, applies to the whole label container.
Use a number for equal padding on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right.
string The link label text. For multiline labels, use '\n' or '\r' to force a line break.
'solid' | 'dashed' | 'dotted'
default: 'solid' The style of the link line.
The shape of the path taken by the link. See the Link Shapes documentation.
The priority of the link. Links with larger priority values are drawn on top of links with lower values. This is in beta from v5.1.
Array Associates timestamps with the item. A timestamp can represent a single moment or a period of time.
<TimeBar items={{
node1: {
times: [{ time: new Date(2019, 4, 1) }],
},
node2: {
times: [
{
time: {
start: 1554713715658,
end: 1558624743356,
},
},
],
},
}}
/> object | Date | number Set the time as a specific moment as a Date or a time in milliseconds. To specify a time interval, set the time as an object with start and end. If only start or end is provided, the interval is treated as an open interval.
number
default: 1 The value associated with a timestamp (for example, the amount of a transaction or the duration of a call).
number
default: 1 The width of the link line. Arrowheads, if present, will enlarge to match the width.
Annotations are notes that can annotate the chart or the items in the chart. You can annotate nodes, links, open and closed combos, and create free-standing annotations without any subjects.
Annotations are drawn in a separate layer on top of the chart and they do not scale during zooming.
See also Annotations documentation for more details.
In addition to all Item properties, annotations support the following properties:
object The border around the annotation.
string
default: 'rgb(230, 230, 230)' The border color.
'solid' | 'dashed'
default: 'solid' The style of the border line.
number | string | number[] | object
default: 3 The radius of border corners. Use a number for equal radius for all corners, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as topLeft or bottomRight.
number
default: 1 The width of the border.
object The style of the connector between the annotation and the annotated subject(s). The connector has three parts:
- A line towards the subject, or multiple lines if there are multiple subjects.
- The decoration at the subject end of the line(s). Can be set in the
subjectEndoption for any annotations. - A container around the subject(s). Can be set in the
containeroption for node and combo annotations.
string
default: 'rgb(0, 0, 0)' The color of the line(s) and of the container.
'rectangle' | 'circle' | 'none'
default: 'none' Whether there is a container surrounding the subject(s):
- 'none' - No container. This is the only option available for link annotations.
- 'circle' - Draws a circle around the subject node(s) or combo(s).
- 'rectangle' - Draws a rectangle around the subject node(s) or combo(s).
'solid' | 'dashed'
default: 'solid' The style of the connector line(s) and subject container(s).
'none' | 'arrow' | 'dot'
default: 'dot' The decoration shown at the subject end of the connector line.
number
default: 1 The width of the connector line(s) and the container lines. Also affects the size of subjectEnd. Set to 0 to hide the connector and create an annotation that isn't visibly connected to subjects but remains in a relative position to them.
object | array of objects Defines one or more annotation labels as described in Annotation Label. Annotation label supports the same properties as Node Label and can be styled using an array of one or more objects which is in beta from v4.0. See also Node Styling.
object The annotation's dimensions in view units. Annotations are always rectangular.
height
required number | 'auto' The height of the annotation. When set to 'auto', the annotation automatically sizes to fit any content inside. When setting dimensions, both height and width must be set.
minHeight
required number The minimum height of the annotation.
minWidth
required number The minimum width of the annotation.
width
required number | 'auto' The width of the annotation. When set to 'auto', the annotation automatically sizes to fit any content inside. When setting dimensions, both width and height must be set.
subject
required string | array of strings | object The id(s) of the item(s) to which the annotation refers. This can be the id, an array of ids, or a dictionary of the ids with truthy values. Set to an empty array for annotation without subjects.
Note that subject cannot be changed by the onItemInteraction event.
Labels show information on annotations. Each annotation can have one or multiple labels.
The label property accepts either a single object or an array of one or more objects, each of which defines one label.
string
default: 'transparent' The label background color.
boolean
default: false Whether the label should be displayed in bold font.
object
default: No border The border around the label.
string The border color.
number | string | number[] | object
default: 0 The radius of border corners. Use a number for equal radius for all corners, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as topLeft or bottomRight.
number
default: 4 The width of the border.
string
default: 'black' The color of the label font.
string The font family to use for the label. Defaults to the fontFamily property of the labels options in the chart's options prop.
object The label font icon. Use position and margin for positioning and offset and fontSize for scaling. If text is also set, only fontIcon is shown. If image is also set, fontIcon is ignored.
number | 'auto'
default: 14 The font size (px) of the label. Set to 'auto' to size the font automatically depending on the annotation size.
string The URL to the label image. To specify image size, set both maxHeight and maxWidth. To set its position and offset within the node, use position and margin. Also supports border but other label customization properties are ignored.
number | string | number[] | object The space between the label and the next label or the parent annotation. Use a number for equal margin on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right.
number The maximum height of the label container. Use this option when fontSize is set to 'auto' to set the maximum height of the text.
number
default: 240 The maximum width of the label container. It defaults to the parent annotation width. Set this option when textWrap is set to 'normal' to reduce the maximum text width before a line break, or when fontSize is set to 'auto' to set the maximum text width.
number | 'stretch' The minimum height of the label container. It will increase to fit the content if necessary. When set to 'stretch', it fills the whole height of the parent annotation.
number | 'stretch' The minimum width of the label container. It will increase to fit the content if necessary. When set to 'stretch', it fills the whole width of the parent annotation. Set to a number if textWrap is set to 'normal' to increase the minimum text width before a line break.
number | string | number[] | object
default: '10 10 10 10' The space between the label border and the content inside the label. Use a number for equal padding on all sides, a string (separated by spaces) containing two, three or four numbers, an array (separated by commas) containing two, three or four numbers, or an object setting values for individual properties such as top or right.
string | object
default: { horizontal: 'center', vertical: 'middle' } The position of the label's top left corner relative to the top left annotation corner. Can either be a compass point string ( 'n', 'ne' etc.) to place the label outside the annotation, or an object with horizontal and/or vertical properties to place the label inside the annotation.
horizontal
required number | 'left' | 'center' | 'right' The horizontal position. Can be a predefined string or a number in world coordinates.
vertical
required number | 'top' | 'middle' | 'bottom' | 'initial' | 'inherit' The vertical position. Can be a predefined string or a number in world coordinates.
string The label text. If both text and fontIcon are set, text is ignored.
object
default: { horizontal: 'left', vertical: 'top' } The alignment of the content inside the label. Applies when labels are not sized automatically to their content due to minHeight and/or minWidth options set.
horizontal
required 'left' | 'center' | 'right' The horizontal alignment.
vertical
required 'top' | 'middle' | 'bottom' The vertical alignment.
'normal' | 'initial'
default: 'normal' Text wrapping inside the label. By default, no text wrapping is used. If set to 'normal', the label content is wrapped on whitespaces created by the space bar. To control line breaks, use minWidth / maxWidth, or the '\n' or '\r' characters. To set a fixed width for a wrapped label, set both minWidth and maxWidth to the same value.
Glyphs are circular decorations or badges which can be applied to items. They can be used to report information about an item, or to allow user interaction.
A glyph can be a simple colored circle, and/or show a font icon, an image or a text. If multiple types are set in the same glyph object, only one is shown in this priority order, from highest to lowest:
- text (both glyph fill
colorandlabelare set) - image (
image) - font icon (
fontIcon) - colored circle (only glyph fill
coloris set)
On nodes, annotations and combos, glyphs are drawn along the border at either a compass position or an integer angle from 0-359. On links, glyphs are drawn next to labels at the link center or at link ends.
See Styling Items for more details about glyphs.
Glyphs have the following properties:
number The glyph position relative to the node or combo. Values are integer angles measured clockwise from north (in the range 0-359). Multiple glyphs on the same node or combo must be positioned using the same positioning property (either angle or position).
boolean
default: false Applies a blink animation to the glyph.
object
default: No border Applies a border to the glyph. Borders on image glyphs without a glyph background are not supported.
string
default: 'rgb(60,60,60)' The glyph fill color. If set for image and font icon glyphs, images and font icons are shown inside the glyph. If not set, images and font icons also replace the glyph background.
object The font icon to use on the glyph. Use imageAlignment for positioning and scaling.
string The URL of the image to use for the glyph. The image can be any size, but 64X64 should be adequate.
object Specifies the label of the glyph. If a label is specified and a glyph fill color is set, the a label take precedence over images and font icons on the same object.
boolean
default: false Whether the label should be displayed in bold font.
string
default: 'white' The color of the label font.
string The font family to use for the label. Defaults to the fontFamily property of the labels options in the chart's options prop.
string The glyph label text.
'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
default: 'ne' The position of the glyph relative to the node or combo. Values are compass points. Multiple glyphs on the same node or combo must be positioned using the same positioning property (either angle or position).
number Sets the distance from the center of the node or closed combo at which the glyph is drawn. Only available when the glyph's angle is defined. If specified, link ends will no longer avoid the glyph.
number
default: 1 Sets an enlargement factor on the glyph.
Sub-items are item decorations (such as node labels or link glyphs) or item parts (such as annotation container or connection). See Sub-items docs for more details.
When a user interacts with a sub-item, the details are reported on the subItem argument of the event handler.
number When the type of sub-item is 'label', 'glyph', 'donut' or 'halo', specifies which label, glyph, donut segment or halo in the array to access. Note that the 'index' is not required when there is only one 'label' sub-item.
function onClick({id, x, y, button, subItem}) {
if (subItem && subItem.type === 'glyph') {
console.log(subItem.index); // 0 for first glyph, 1 for second, etc
}
} 'end1' | 'end2' The end of the link the sub-item is attached to. Only set if the type is 'arrowhead', 'glyph' or 'label'.
object The subjects of the annotation the sub-item is a part of. Only set if the type is 'container' or 'connection'.
type
required 'label' | 'donut' | 'container' | 'arrowhead' | 'glyph' | 'halo' | 'connection' The type of the sub-item:
- 'donut', 'halo' - node decorations
- 'label', 'glyph' - node, link and annotation decoration
- 'arrowhead' - arrows on link ends
- 'container' - the container surrounding annotation subjects
- 'connection' - the line and subject end of the annotation connector
A dictionary detailing which modifier keys were pressed when the event occurred.
alt
required boolean If an alt key was held down when the event occurred.
consistentCtrl
required boolean If a consistent control key (ctrl key, cmd key on MacOS) was held down when the event occurred.
ctrl
required boolean If a control key was held down when the event occurred.
meta
required boolean If the meta key was held down when the event occurred.
shift
required boolean If a shift key was held down when the event occurred.
Closed combo styling supports all Node properties.
Open combo styling supports:
Some of the properties for open combos may have different defaults as described below.
The setStyle function also accepts the following properties:
string | object Sets the arrangement of items inside an open combo. Accepts a string with the arrangement name or an object to also set additional options.
'auto' | object
default: 'auto' If name is set to 'grid', this can be set to an object in the form of { rows: number } or { columns: number } to set the row/column dimension of the grid.
string The name of the custom property on the node's or combo node's data property that defines which level the node/combo belongs to in the sequential arrangement. The property must contain a numeric value, where the lowest number is the top of the hierarchy. If both the level and top properties are specified, top is ignored.
'angled' | 'curved' | 'direct'
default: 'direct' The default shape for the path taken by links in the open combo. The direction of 'curved' and 'angled' links is inferred from orientation. Can be overridden using linkShape for individual links. See the Link Shapes documentation.
Angled links are in beta from v5.1.
'none' | 'lens' | 'concentric' | 'grid' | 'sequential' | 'auto'
default: 'lens' | 'grid' The arrangement to apply. Circular combos use 'lens' by default, rectangular combos use 'grid' by default.
string | object When the arrangement name is 'sequential', specifies the order of nodes/combos within the same arrangement level of a connected component in the chart. Any disconnected nodes or combos are ignored.
string The key of the custom data value on the node's data property that orders the items within the same level in sequential layout. When specified, items are ordered alphanumerically and in the descending order unless sortBy is also set.
'ascending' | 'descending'
default: 'descending' The direction of ordered items.
'left' | 'right' | 'up' | 'down'
default: 'down' The orientation of the sequential arrangement.
'rectangle' | 'circle' | 'aligned'
default: 'aligned' The packing mode to arrange subgraphs in the sequential arrangement.
object The positioning of nodes that share the same neighbors and level in the sequential arrangement. If property is set in orderBy, stacking only applies to nodes also sharing the same property value.
'grid' | 'none'
default: 'none' If set to 'grid', four or more same-level nodes with identical connections are stacked in a grid.
number
default: 1 The spacing between levels in the sequential arrangement. Values must be positive.
'auto' | 'equal'
default: 'equal' The type of spacing between levels in the sequential arrangement. Set to 'auto' if individual levels contain unevenly sized items (nodes or combos) to optimize use of space and get more even distribution of levels.
number
default: 5 The spacing between items inside open combos, with higher values making nodes closer. Ranges from 0-10.
string | array of strings A node id or an array of ids that should be at the top of the sequential arrangement. If both level and top are specified, top is ignored.
object Defines a border around the combo. Defaults to a grey border for open combos, and no border for closed combos. See node border.
object Sets the style of the closed combo. All Node properties are supported.
<Chart onCombineNodes={({setStyle}) => {
setStyle({
// open combo will be white
color: 'white',
closedStyle: {
// closed combo will be blue
color: 'blue',
},
});
}}/> string The fill color. Defaults to rgba(240,240,240,0.8) for open combos, and grey for closed combos.
object Used to store custom data on a combo. Used by graph functions and layouts.
boolean Fades the combo into the background. Defaults to false, unless all the children are faded causing the default to be true.
array of Glyphs An array of objects describing the glyphs shown on the combo. Glyphs are not inherited between open and closed combos.
string Overrides the default id of the combo.
object | array of objects Defines one or more labels for a combo. Combo labels can be styled using an array of one or more objects which is in beta from v4.4. See also Node Styling.
Closed combos with no label inherit the open style label if the open label is an object. Default position for nodes and closed combos is in the middle and centre of the node. Default position for open combos is outside and below the combo.
boolean
default: true Opens the combo so that its children are visible.
number
default: 1 Scales the closed combo size by an enlargement factor. When the combo is open, only glyphs and labels are scaled.
Sets the style of a summary link. The default style is inherited from the first link it combines, i.e. the first link between the two combos. To change the styling, pass in options as a single object. All Link properties are supported, except for id1 and id2. In addition, you can provide the following properties:
object | boolean
default: false Display the summary link's contents. You can supply a boolean to hide or show all child links, or supply a dictionary with truthy values for each child link you want to display.
string Override the default id of the summary link.
boolean
default: true Display the summary link.
Sets the style of an aggregate link, which is in beta from v4.4. The default style of an aggregate link is the same as for a regular link, i.e. a gray link with a width of 1.
Aggregate links do not inherit any styling from their child links with the exception of arrowheads. To change the styling of an aggregate link, pass in the styling options as a single object.
All link properties are supported except for id1, id2 and fade. An aggregate link is faded only when all of its children are set to fade.
Options to control the dragging behavior. Pass in options as a single object.
Creates a temporary link dragger which will draw a link between the target node and the cursor.
boolean Set to false to drag child nodes independently of their parent combos.
'node' | 'pan' | 'marquee' The type of drag.
Colors can be specified as a string in several formats:
- One of the 17 CSS standard named colors, e.g. 'red'
- Shorthand hexadecimal colors, e.g., '#F00'
- Hexadecimal colors, e.g., '#FF0000'
- rgb or rgba formats - i.e., 'rgb(255, 0, 0)' or 'rgba(255, 0, 0, 0.5)'