图表效果与 API 控制

演示各种图表实例 API 方法，用于创建视觉效果，包括节点聚焦、动画、透明度更改和动态节点添加。

图表效果与 API 控制

功能概述

此示例演示各种图表实例 API 方法以创建视觉效果和控制图表行为，包括节点聚焦、动画过渡、透明度更改以及动态添加节点和连线。

核心特性实现

带动画聚焦节点

平滑平移和缩放以居中显示特定节点：

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

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

切换节点透明度

更改节点的不透明度以创建透明效果：

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
        });
    }
};

动画节点移动

将节点平滑移动到目标位置：

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);
    }
};

动态添加子节点

在保持力学布局的同时添加新节点和连线：

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();
};

复制节点

使用其属性复制现有节点：

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();
    }
};

创意使用场景

• 交互式演示：在主题之间创建平滑过渡
• 数据探索：动态突出和揭示连接
• 网络监控：强调关键节点或路径
• 教育工具：引导学习者理解复杂关系
• 叙事：通过图表状态动画讲述故事