Examples tagged Interactions

Maze navigation newA game-like keyboard navigation demo where a pixel axolotl swims a graph like a maze. The twist: the movement is spatial rather than topological. What it…

Count nodes and edges Get the total count of nodes and edges in a graph

Add node Add a single node to an existing graph

Add edge Add a single edge connecting two nodes

Remove node Remove a specific node from a graph

Remove edge Remove a specific edge from a graph

Set data Attach data to nodes and edges and use it to style them

Clear Wipe all nodes and edges from the graph in one action

Undo redo Undo and redo changes made to the graph

Hover Show node or edge info when hovering with the mouse

Click Show details about a node or edge when you click on it

Select Listen for selection events on nodes and edges

Disabled state Disable nodes and edges so they can't be selected or hovered

Panning Click and drag to move the camera around the graph

Rectangle selection Draw a rectangle with Ctrl+drag to select nodes or edges

Lasso (nodes) Draw a freehand lasso to select a group of nodes

Selection API Get the currently selected and unselected nodes and edges

Custom selection Build a custom selection mechanism with left and right click

Badges interactions Handle clicks and hover on node badges

Node resizing Manually resize nodes by dragging a handle

Container resizing Resize the graph container on the fly

Edge rewiring Drag edge endpoints to rewire connections between nodes

Group selection Group a set of selected nodes into one meta-node

Connect nodes Let users draw new edges by dragging between nodes

Keyboard interactions Bind keyboard shortcuts to graph actions

Draggable/non-draggable nodes Enable or disable dragging on individual nodes

Node snapping Snap nodes to alignment grid while dragging them

Halo masking Fade out non-adjacent edges when hovering a node

Fast highlight Highlight connected nodes and edges on mouse hover

Hold space to drag Hold Space to drag the viewport instead of selecting

Scroll to pan Use scroll to pan the view; Ctrl+scroll to zoom

Camera Control the camera — move, rotate, and zoom the view

Animate to bounds Animate the camera to zoom in on a specific cluster

Local grid Apply a grid layout to only a selected subset of nodes

Local ForceLink Apply ForceLink layout to only a selected subset of nodes

Local force Run force layout on selected nodes without moving others

Local Radial Apply radial layout to a selected subset of nodes

Incremental ungrouping Double-click to expand grouped nodes one level at a time

Incremental expand Add new nodes to a graph without rearranging existing ones

Visual grouping expand/collapse newExpand or collapse groups and load their children on demand

Group on zoom Automatically group nodes based on the current zoom level

Scrollable page Prevent the graph from capturing mouse scroll when not in focus

Drag and drop Drag and drop a graph file onto the canvas to load it

Neighborhood highlight Hover a node to highlight its direct and second-degree neighbors