You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- className (string; optional): Sets the class name of the element (the value of an element's html
13
13
class attribute).
14
14
- style (dict; optional): Add inline styles to the root element.
15
-
- elements (list; optional): A list of dictionaries representing the elements of the networks. Each
16
-
dictionary describes an element, and specifies its purpose. Keys
17
-
accepted are:
18
-
- `group` (string): Either 'nodes' or 'edges'. If not given, it's automatically inferred.
19
-
- `data` (dictionary): Element specific data.
20
-
- `id` (string): Reference to the element, useful for selectors and edges. Randomly assigned if not given.
21
-
- `label` (string): Optional name for the element, useful when `data(label)` is given to a style's `content` or `label`. It is only a convention.
22
-
- `parent` (string): Only for nodes. Optional reference to another node. Needed to create compound nodes.
23
-
- `source` (string): Only for edges. The id of the source node, which is where the edge starts.
24
-
- `target` (string): Only for edges. The id of the target node, where the edge ends.
25
-
- `position` (dictionary): Only for nodes. The position of the node.
26
-
- `x` (number): The x-coordinate of the node.
27
-
- `y` (number): The y-coordinate of the node.
28
-
- `selected` (boolean): If the element is selected upon initialisation.
29
-
- `selectable` (boolean): If the element can be selected.
30
-
- `locked` (boolean): Only for nodes. If the position is immutable.
31
-
- `grabbable` (boolean): Only for nodes. If the node can be grabbed and moved by the user.
32
-
- `classes` (string): Space separated string of class names of the element. Those classes can be selected by a style selector.
33
-
34
-
The [official Cytoscape.js documentation](http://js.cytoscape.org/#notation/elements-json)
35
-
offers an extensive overview and examples of element declaration.
36
-
- stylesheet (list; optional): A list of dictionaries representing the styles of the elements. Each
37
-
dictionary requires the following keys:
38
-
- `selector` (string): Which elements you are styling. Generally, you select a group of elements (node, edges, both), a class (that you declare in the element dictionary), or an element by ID.
39
-
- `style` (dictionary): What aspects of the elements you want to modify. This could be the size or color of a node, the shape of an edge arrow, or many more.
40
-
41
-
Both [the selector string](http://js.cytoscape.org/#selectors) and
42
-
[the style dictionary](http://js.cytoscape.org/#style/node-body) are
43
-
exhaustively documented in the Cytoscape.js docs. Although methods such
44
-
as `cy.elements(...)` and `cy.filter(...)` are not available, the selector
45
-
string syntax stays the same.
15
+
- elements (list; optional): A list of dictionaries representing the elements of the networks.
16
+
1. Each dictionary describes an element, and specifies its purpose.
17
+
- `group` (string): Either 'nodes' or 'edges'. If not given, it's automatically inferred.
18
+
- `data` (dictionary): Element specific data.
19
+
- `id` (string): Reference to the element, useful for selectors and edges. Randomly assigned if not given.
20
+
- `label` (string): Optional name for the element, useful when `data(label)` is given to a style's `content` or `label`. It is only a convention.
21
+
- `parent` (string): Only for nodes. Optional reference to another node. Needed to create compound nodes.
22
+
- `source` (string): Only for edges. The id of the source node, which is where the edge starts.
23
+
- `target` (string): Only for edges. The id of the target node, where the edge ends.
24
+
- `position` (dictionary): Only for nodes. The position of the node.
25
+
- `x` (number): The x-coordinate of the node.
26
+
- `y` (number): The y-coordinate of the node.
27
+
- `selected` (boolean): If the element is selected upon initialisation.
28
+
- `selectable` (boolean): If the element can be selected.
29
+
- `locked` (boolean): Only for nodes. If the position is immutable.
30
+
- `grabbable` (boolean): Only for nodes. If the node can be grabbed and moved by the user.
31
+
- `classes` (string): Space separated string of class names of the element. Those classes can be selected by a style selector.
32
+
33
+
2. The [official Cytoscape.js documentation](http://js.cytoscape.org/#notation/elements-json) offers an extensive overview and examples of element declaration.
34
+
- stylesheet (list; optional): A list of dictionaries representing the styles of the elements.
35
+
1. Each dictionary requires the following keys:
36
+
- `selector` (string): Which elements you are styling. Generally, you select a group of elements (node, edges, both), a class (that you declare in the element dictionary), or an element by ID.
37
+
- `style` (dictionary): What aspects of the elements you want to modify. This could be the size or color of a node, the shape of an edge arrow, or many more.
38
+
39
+
2. Both [the selector string](http://js.cytoscape.org/#selectors) and
40
+
[the style dictionary](http://js.cytoscape.org/#style/node-body) are
41
+
exhaustively documented in the Cytoscape.js docs. Although methods such
42
+
as `cy.elements(...)` and `cy.filter(...)` are not available, the selector
43
+
string syntax stays the same.
46
44
- layout (dict; optional): A dictionary specifying how to set the position of the elements in your
47
45
graph. * The `'name'` key is required, and indicates which layout (algorithm) to
48
-
use. The layouts available by default are:
49
-
- `random`: Randomly assigns positions
50
-
- `preset`: Assigns position based on the `position` key in element dictionaries
51
-
- `circle`: Single-level circle, with optional radius
52
-
- `concentric`: Multi-level circle, with optional radius
53
-
- `grid`: Square grid, optionally with numbers of `rows` and `cols`
54
-
- `breadthfirst`: Tree structure built using BFS, with optional `roots`
55
-
- `cose`: Force-directed physics simulation
56
-
57
-
The keys accepted by `layout` vary depending on the algorithm, but some
58
-
keys are accepted by all layouts:
59
-
- `fit` (boolean): Whether to render the nodes in order to fit the canvas.
60
-
- `padding` (number): Padding around the sides of the canvas, if fit is enabled.
61
-
- `animate` (boolean): Whether to animate change in position when the layout changes.
62
-
- `animationDuration` (number): Duration of animation in milliseconds, if enabled.
63
-
- `boundingBox` (dictionary): How to constrain the layout in a specific area. Keys accepted are either `x1, y1, x2, y2` or `x1, y1, w, h`, all of which receive a pixel value.
64
-
The complete list of layouts and their accepted options are available
65
-
on the [Cytoscape.js docs](http://js.cytoscape.org/#layouts).
66
-
Note that certain keys are not supported in Dash since the value is a
67
-
JavaScript function or a callback. Please visit [this issue](https://github.com/plotly/dash-cytoscape/issues/25)
68
-
for more information.
46
+
use.
47
+
1. The layouts available by default are:
48
+
- `random`: Randomly assigns positions
49
+
- `preset`: Assigns position based on the `position` key in element dictionaries
50
+
- `circle`: Single-level circle, with optional radius
51
+
- `concentric`: Multi-level circle, with optional radius
52
+
- `grid`: Square grid, optionally with numbers of `rows` and `cols`
53
+
- `breadthfirst`: Tree structure built using BFS, with optional `roots`
54
+
- `cose`: Force-directed physics simulation
55
+
56
+
2. The keys accepted by `layout` vary depending on the algorithm, but some
57
+
keys are accepted by all layouts:
58
+
- `fit` (boolean): Whether to render the nodes in order to fit the canvas.
59
+
- `padding` (number): Padding around the sides of the canvas, if fit is enabled.
60
+
- `animate` (boolean): Whether to animate change in position when the layout changes.
61
+
- `animationDuration` (number): Duration of animation in milliseconds, if enabled.
62
+
- `boundingBox` (dictionary): How to constrain the layout in a specific area. Keys accepted are either `x1, y1, x2, y2` or `x1, y1, w, h`, all of which receive a pixel value.
63
+
64
+
3. The complete list of layouts and their accepted options are available
65
+
on the [Cytoscape.js docs](http://js.cytoscape.org/#layouts).
66
+
Note that certain keys are not supported in Dash since the value is a
67
+
JavaScript function or a callback. Please visit [this issue](https://github.com/plotly/dash-cytoscape/issues/25)
68
+
for more information.
69
69
- pan (dict; optional): Dictionary indicating the initial panning position of the graph. The
70
70
following keys are accepted:
71
-
- `x` (number): The x-coordinate of the position.
72
-
- `y` (number): The y-coordinate of the position.
71
+
- `x` (number): The x-coordinate of the position.
72
+
- `y` (number): The y-coordinate of the position.
73
73
- zoom (number; optional): The initial zoom level of the graph. You can set `minZoom` and
74
74
`maxZoom` to set restrictions on the zoom level.
75
75
- panningEnabled (boolean; optional): Whether panning the graph is enabled (i.e., the position of the graph is
@@ -95,55 +95,55 @@ class attribute).
95
95
- autoRefreshLayout (boolean; optional): Whether the layout should be refreshed when elements are added or removed.
96
96
- tapNode (dict; optional): The complete node dictionary returned when you tap or click it.
97
97
98
-
Node-specific items:
99
-
- `edgesData` (dictionary)
100
-
- `renderedPosition` (dictionary)
101
-
- `timeStamp` (number)
102
-
103
-
General items (for all elements):
104
-
- `classes` (string)
105
-
- `data` (dictionary)
106
-
- `grabbable` (boolean)
107
-
- `group` (string)
108
-
- `locked` (boolean)
109
-
- `position` (dictionary)
110
-
- `selectable` (boolean)
111
-
- `selected` (boolean)
112
-
- `style` (dictionary)
113
-
114
-
Items for compound nodes:
115
-
- `ancestorsData` (dictionary)
116
-
- `childrenData` (dictionary)
117
-
- `descendantsData` (dictionary)
118
-
- `parentData` (dictionary)
119
-
- `siblingsData` (dictionary)
120
-
- `isParent` (boolean)
121
-
- `isChildless` (boolean)
122
-
- `isChild` (boolean)
123
-
- `isOrphan` (boolean)
124
-
- `relativePosition` (dictionary)
98
+
1. Node-specific items:
99
+
- `edgesData` (dictionary)
100
+
- `renderedPosition` (dictionary)
101
+
- `timeStamp` (number)
102
+
103
+
2. General items (for all elements):
104
+
- `classes` (string)
105
+
- `data` (dictionary)
106
+
- `grabbable` (boolean)
107
+
- `group` (string)
108
+
- `locked` (boolean)
109
+
- `position` (dictionary)
110
+
- `selectable` (boolean)
111
+
- `selected` (boolean)
112
+
- `style` (dictionary)
113
+
114
+
3. Items for compound nodes:
115
+
- `ancestorsData` (dictionary)
116
+
- `childrenData` (dictionary)
117
+
- `descendantsData` (dictionary)
118
+
- `parentData` (dictionary)
119
+
- `siblingsData` (dictionary)
120
+
- `isParent` (boolean)
121
+
- `isChildless` (boolean)
122
+
- `isChild` (boolean)
123
+
- `isOrphan` (boolean)
124
+
- `relativePosition` (dictionary)
125
125
- tapNodeData (dict; optional): The data dictionary of a node returned when you tap or click it.
126
126
- tapEdge (dict; optional): The complete edge dictionary returned when you tap or click it.
127
127
128
-
Edge-specific items:
129
-
- `isLoop` (boolean)
130
-
- `isSimple` (boolean)
131
-
- `midpoint` (dictionary)
132
-
- `sourceData` (dictionary)
133
-
- `sourceEndpoint` (dictionary)
134
-
- `targetData` (dictionary)
135
-
- `targetEndpoint` (dictionary)
136
-
- `timeStamp` (number)
137
-
138
-
General items (for all elements):
139
-
- `classes` (string)
140
-
- `data` (dictionary)
141
-
- `grabbable` (boolean)
142
-
- `group` (string)
143
-
- `locked` (boolean)
144
-
- `selectable` (boolean)
145
-
- `selected` (boolean)
146
-
- `style` (dictionary)
128
+
1. Edge-specific items:
129
+
- `isLoop` (boolean)
130
+
- `isSimple` (boolean)
131
+
- `midpoint` (dictionary)
132
+
- `sourceData` (dictionary)
133
+
- `sourceEndpoint` (dictionary)
134
+
- `targetData` (dictionary)
135
+
- `targetEndpoint` (dictionary)
136
+
- `timeStamp` (number)
137
+
138
+
2. General items (for all elements):
139
+
- `classes` (string)
140
+
- `data` (dictionary)
141
+
- `grabbable` (boolean)
142
+
- `group` (string)
143
+
- `locked` (boolean)
144
+
- `selectable` (boolean)
145
+
- `selected` (boolean)
146
+
- `style` (dictionary)
147
147
- tapEdgeData (dict; optional): The data dictionary of an edge returned when you tap or click it.
148
148
- mouseoverNodeData (dict; optional): The data dictionary of a node returned when you hover over it.
149
149
- mouseoverEdgeData (dict; optional): The data dictionary of an edge returned when you hover over it.
0 commit comments