elements (list; optional): A list of dictionaries representing the elements of the networks.
Each dictionary describes an element, and specifies its purpose.
group(string): Either ‘nodes’ or ‘edges’. If not given, it’s automatically inferred.
data(dictionary): Element specific data.
id(string): Reference to the element, useful for selectors and edges. Randomly assigned if not given.
label(string): Optional name for the element, useful when
data(label)is given to a style’s
label. It is only a convention.
parent(string): Only for nodes. Optional reference to another node. Needed to create compound nodes.
source(string): Only for edges. The id of the source node, which is where the edge starts.
target(string): Only for edges. The id of the target node, where the edge ends.
position(dictionary): Only for nodes. The position of the node.
x(number): The x-coordinate of the node.
y(number): The y-coordinate of the node.
selected(boolean): If the element is selected upon initialisation.
selectable(boolean): If the element can be selected.
locked(boolean): Only for nodes. If the position is immutable.
grabbable(boolean): Only for nodes. If the node can be grabbed and moved by the user.
classes(string): Space separated string of class names of the element. Those classes can be selected by a style selector.
The official Cytoscape.js documentation offers an extensive overview and examples of element declaration.
- stylesheet (list; optional): A list of dictionaries representing the styles of the elements.
Each dictionary requires the following keys:
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.
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.
Both the selector string and
the style dictionary are
exhaustively documented in the Cytoscape.js docs. Although methods such
cy.filter(...) are not available, the selector
string syntax stays the same.
- layout (dict; optional): A dictionary specifying how to set the position of the elements in your
'name' key is required, and indicates which layout (algorithm) to
The layouts available by default are:
random: Randomly assigns positions
preset: Assigns position based on the
positionkey in element dictionaries
circle: Single-level circle, with optional radius
concentric: Multi-level circle, with optional radius
grid: Square grid, optionally with numbers of
breadthfirst: Tree structure built using BFS, with optional
cose: Force-directed physics simulation
The keys accepted by
layout vary depending on the algorithm, but some
keys are accepted by all layouts:
fit(boolean): Whether to render the nodes in order to fit the canvas.
padding(number): Padding around the sides of the canvas, if fit is enabled.
animate(boolean): Whether to animate change in position when the layout changes.
animationDuration(number): Duration of animation in milliseconds, if enabled.
boundingBox(dictionary): How to constrain the layout in a specific area. Keys accepted are either
x1, y1, x2, y2or
x1, y1, w, h, all of which receive a pixel value.
The complete list of layouts and their accepted options are available
on the Cytoscape.js docs.
Note that certain keys are not supported in Dash since the value is a
for more information.
- pan (dict; optional): Dictionary indicating the initial panning position of the graph. The
following keys are accepted:
x (number): The x-coordinate of the position.
y (number): The y-coordinate of the position.
- zoom (number; optional): The initial zoom level of the graph. You can set
maxZoom to set restrictions on the zoom level.
- panningEnabled (boolean; optional): Whether panning the graph is enabled (i.e., the position of the graph is
- userPanningEnabled (boolean; optional): Whether user events (e.g. dragging the graph background) are allowed to
pan the graph.
- minZoom (number; optional): A minimum bound on the zoom level of the graph. The viewport can not be
scaled smaller than this zoom level.
- maxZoom (number; optional): A maximum bound on the zoom level of the graph. The viewport can not be
scaled larger than this zoom level.
- zoomingEnabled (boolean; optional): Whether zooming the graph is enabled (i.e., the zoom level of the graph
is mutable overall).
- userZoomingEnabled (boolean; optional): Whether user events (e.g. dragging the graph background) are allowed
to pan the graph.
- boxSelectionEnabled (boolean; optional): Whether box selection (i.e. drag a box overlay around, and release it
to select) is enabled. If enabled, the user must taphold to pan the graph.
- autoungrabify (boolean; optional): Whether nodes should be ungrabified (not grabbable by user) by
default (if true, overrides individual node state).
- autolock (boolean; optional): Whether nodes should be locked (not draggable at all) by default
(if true, overrides individual node state).
- autounselectify (boolean; optional): Whether nodes should be unselectified (immutable selection state) by
default (if true, overrides individual element state).
- autoRefreshLayout (boolean; optional): Whether the layout should be refreshed when elements are added or removed.
- tapNode (dict; optional): The complete node dictionary returned when you tap or click it.
General items (for all elements):
Items for compound nodes:
General items (for all elements):
A class to facilitate tree manipulation in Cytoscape.
param node_id: The ID of this tree, passed to the node data dict
param children: The children of this tree, also Tree objects
param data: Dictionary passed to this tree’s node data dict
param edge_data: Dictionary passed to the data dict of the edge connecting this tree to its
return: If the Tree is a leaf or not.
Add a list of children to the current children of a Tree.
param children: List of Tree objects
Get all the edges of the tree in Cytoscape JSON format.
return: List of dictionaries, each specifying an edge.
Get all the nodes of the tree in Cytoscape JSON format.
return: List of dictionaries, each specifying a node.
Get all the elements of the tree in Cytoscape JSON format.
return: List of dictionaries, each specifying an element.
Find a Tree object by its ID.
param search_id: the queried ID
param method: Which traversal method to use. Either “bfs” or “dfs”.
return: Tree object if found, None otherwise.
Generate the index of a Tree, and set it in place. If there was a previous index, it is
erased. This uses a BFS traversal. Please note that when a child is added to the tree,
the index is not regenerated. Furthermore, an index assigned to a parent cannot be
accessed by its children, and vice-versa.
return: Dictionary mapping node_id to Tree object.