Graphty

Appearance

JavaScript API Reference ​

Complete API reference for the Graph class.

Overview ​

The Graph class is the core orchestrator for programmatic graph manipulation. Access it via the .graph property on the Web Component:

typescript
const element = document.querySelector("graphty-element");
const graph = element.graph;

TIP

For usage patterns and examples, see the JavaScript API Guide.

Core Methods ​

Data Management ​

MethodParametersReturnsDescription
addNodes(nodes)NodeData[]Promise<void>Add nodes to the graph
addEdges(edges)EdgeData[]Promise<void>Add edges to the graph
removeNodes(ids)string[]Promise<void>Remove nodes by ID
updateNodes(updates)NodeUpdate[]Promise<void>Update node properties
getNode(id)stringNode | undefinedGet node by ID
getNodes()-Node[]Get all nodes
getEdges()-Edge[]Get all edges
clear()-Promise<void>Remove all data

Selection ​

MethodParametersReturnsDescription
selectNode(id)stringvoidSelect a node
deselectNode()-voidClear selection
getSelectedNode()-Node | nullGet selected node

Layout ​

MethodParametersReturnsDescription
setLayout(type, options?)string, objectvoidSet layout algorithm
waitForSettled()-Promise<void>Wait for layout to stabilize
isSettled()-booleanCheck if layout is stable

Algorithms ​

MethodParametersReturnsDescription
runAlgorithm(namespace, type)string, stringPromise<AlgorithmResult>Run an algorithm
applySuggestedStyles(id)stringvoidApply algorithm visualization

Camera Control ​

MethodParametersReturnsDescription
zoomToFit()-voidFit all nodes in view
getCameraState()-CameraStateGet camera state
setCameraState(state, options?)CameraState, CameraAnimationOptionsPromise<void>Set camera state
setCameraPosition(pos){x, y, z}voidSet camera position
setCameraTarget(target){x, y, z}voidSet camera target

Styling ​

MethodParametersReturnsDescription
addStyleLayer(layer)StyleLayervoidAdd a style layer
removeStyleLayer(id)stringvoidRemove a style layer
clearStyleLayers()-voidRemove all style layers

Events ​

MethodParametersReturnsDescription
on(event, handler)string, FunctionvoidSubscribe to events
off(event, handler)string, FunctionvoidUnsubscribe from events

Batch Operations ​

MethodParametersReturnsDescription
batchOperations(fn)async FunctionPromise<void>Batch multiple operations

Manager Classes ​

The Graph class exposes manager instances for advanced control:

StyleManager ​

typescript
graph.styleManager.addLayer({ selector: "*", styles: { node: { color: "#ff0000" } } });
graph.styleManager.removeLayer(layerId);
graph.styleManager.clearLayers();

DataManager ​

typescript
await graph.dataManager.loadFromUrl(url);
await graph.dataManager.addNodes(nodes);
await graph.dataManager.clear();

LayoutManager ​

typescript
graph.layoutManager.setLayout("ngraph", options);
await graph.layoutManager.waitForSettled();

AlgorithmManager ​

typescript
await graph.algorithmManager.run("graphty", "degree");
graph.algorithmManager.applySuggestedStyles("graphty:degree");

Data Types ​

NodeData ​

typescript
interface NodeData {
    id: string;
    label?: string;
    [key: string]: unknown;
}

EdgeData ​

typescript
interface EdgeData {
    source: string;
    target: string;
    weight?: number;
    [key: string]: unknown;
}

CameraState ​

typescript
interface CameraState {
    position: { x: number; y: number; z: number };
    target: { x: number; y: number; z: number };
    up: { x: number; y: number; z: number };
}

StyleLayer ​

typescript
interface StyleLayer {
    id?: string;
    selector: string;
    priority?: number;
    styles: {
        node?: NodeStyle;
        edge?: EdgeStyle;
        label?: LabelStyle;
    };
}

Generated Reference ​

For complete type definitions and detailed API documentation:

Extension Classes ​

For creating custom extensions: