Graph Effects and API Controls

Demonstrates various graph instance API methods for creating visual effects including node focusing, animations, opacity changes, and dynamic node additions.

Graph Effects and API Controls

Functional Overview

This example demonstrates various graph instance API methods to create visual effects and control graph behavior, including node focusing, animated transitions, opacity changes, and dynamic node/line additions.

Implementation of Key Features

Focus on Node with Animation

Smoothly pan and zoom to center a specific node:

const focusOnNodeWithAnimation = async (nodeId: string) => {
    graphInstance.enableCanvasAnimation();
    focusOnNode(nodeId);
    await graphInstance.sleep(300);
    graphInstance.disableCanvasAnimation();
};

const focusOnNode = (nodeId: string) => {
    graphInstance.focusNodeById(nodeId);
};

Toggle Node Opacity

Change a node’s opacity to create transparency effects:

const toogleN6Opacity = async () => {
    const node6 = graphInstance.getNodeById('N6');
    if (node6) {
        await focusOnNodeWithAnimation(node6.id);
        graphInstance.updateNode(node6, {
            opacity: node6.opacity === 0.3 ? 1 : 0.3
        });
    }
};

Animate Node Movement

Move a node to a target position with smooth animation:

const moveN8To = async (targetNodeId: string) => {
    const node8 = graphInstance.getNodeById('N8');
    const targetNode = graphInstance.getNodeById(targetNodeId);
    if (node8 && targetNode) {
        await graphInstance.zoomToFitWithAnimation([node8, targetNode]);
        const finalXy = {
            x: targetNode.x - 50,
            y: targetNode.y
        };
        await animateMove(node8, finalXy, (x, y) => {
            graphInstance.updateNode(node8, { x, y });
        }, 800);
    }
};

Add Child Nodes Dynamically

Add new nodes and lines while maintaining force layout:

const addChildNodeTo = (parentNodeId: string, newChildrenCount: number) => {
    const newNodes: JsonNode[] = [];
    const newLines: JsonLine[] = [];
    const parentNode = graphInstance.getNodeById(parentNodeId);
    for (let i = 0; i < newChildrenCount; i++) {
        const newNodeId = graphInstance.generateNewNodeId();
        newNodes.push({
            id: newNodeId,
            text: 'New Node',
            x: parentNode.x + 200,
            y: parentNode.y + (Math.random() * 200 - 100)
        });
        newLines.push({ id: 'line-to-' + newNodeId, from: parentNodeId, to: newNodeId });
    }
    graphInstance.addNodes(newNodes);
    graphInstance.addLines(newLines);
    graphInstance.startAutoLayout();
};

Copy Node

Duplicate an existing node with its properties:

const copyNode = () => {
    if (currentNode) {
        const newNodeId = graphInstance.generateNewNodeId();
        const newNode: JsonNode = {
            id: newNodeId,
            color: currentNode.color,
            text: currentNode.text,
            x: currentNode.x + 60,
            y: currentNode.y + 60
        };
        graphInstance.addNodes([newNode]);
        graphInstance.startAutoLayout();
    }
};

Creative Use Cases

• Interactive Presentations: Create smooth transitions between topics
• Data Exploration: Highlight and reveal connections dynamically
• Network Monitoring: Emphasize critical nodes or paths
• Educational Tools: Guide learners through complex relationships
• Storytelling: Animate narrative through graph states