搜索和聚焦节点

演示搜索功能以查找和聚焦图中的特定节点，具有自动居中和高亮显示。

搜索和聚焦节点

功能概述

本示例演示如何实现搜索功能以查找和聚焦图中的特定节点。用户可以按文本或 ID 搜索节点，图会自动居中并高亮显示匹配的节点。

核心特性实现

搜索面板

<QueryFormPanel
    nodeItems={nodeItems}
    onSearch={handleSearch}
    onSelect={focusOnNode}
/>

聚焦功能

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

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

节点搜索

通过文本或 ID 搜索所有节点，具有自动完成建议。

创意使用场景

大型组织架构图：按姓名或 ID 搜索员工。大型组织中的快速导航。

网络拓扑：按主机名或 IP 搜索设备。网络管理。

知识图谱：搜索概念或主题。知识探索。

流程图：搜索流程步骤或活动。流程文档导航。

系统架构：搜索组件或模块。架构文档。

社交网络：搜索用户或个人资料。网络探索。

产品目录：搜索产品或类别。目录导航。

站点地图：搜索页面或部分。网站导航。