通过 ID 聚焦节点

演示如何以编程方式将视图居中于特定节点，并提供动画过渡和缩放适配。

通过 ID 聚焦节点

功能概述

此示例演示如何以编程方式将视图居中于特定节点，并提供动画过渡和缩放适配选项。

核心特性实现

聚焦节点 API

使用 focusNodeById 方法居中显示节点：

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

动画聚焦

聚焦时添加平滑过渡：

const focusWithAnimation = async (nodeId: string) => {
    graphInstance.enableCanvasAnimation();
    graphInstance.focusNodeById(nodeId);
    await graphInstance.sleep(500);
    graphInstance.disableCanvasAnimation();
};

聚焦和缩放

聚焦时确保节点适合视图：

const focusAndZoom = async (nodeId: string) => {
    const node = graphInstance.getNodeById(nodeId);
    if (node) {
        await graphInstance.zoomToFitWithAnimation([node]);
    }
};

聚焦多个节点

一次居中显示多个节点：

const focusOnNodes = async (nodeIds: string[]) => {
    const nodes = nodeIds.map(id => graphInstance.getNodeById(id)).filter(Boolean);
    await graphInstance.moveToCenter(nodes);
};

编程遍历

按顺序浏览节点：

const traverseNodes = async (nodeIds: string[]) => {
    for (const nodeId of nodeIds) {
        await focusWithAnimation(nodeId);
        await graphInstance.sleep(1000);
    }
};

创意使用场景

• 引导游览：自动浏览关键节点
• 搜索结果：跳转到匹配的节点
• 通知：将注意力引导到特定节点
• 演示：以编程方式控制视图
• 无障碍：通过键盘浏览图表