[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:focus-viewport-by-node-id":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在大型纯节点画布上按 Node ID 聚焦视口\n\n## 这个示例构建了什么\n\n这个示例构建了一个全高的 relation-graph 查看器，在灰色画布上展示 160 个彼此断开的矩形节点，并允许用户通过悬浮控制窗口选择目标节点的 node ID，将视口跳转到已知目标位置。该图并不表达业务关系，也不展示边样式。它更像是一个定位器风格的沙盒，用于在大范围节点区域中移动。\n\n用户可以从十个预设 node ID 中选择一个，观察画布以动画方式移动到目标位置，拖拽或最小化工具窗口，打开设置浮层，修改滚轮和拖拽行为，并将图导出为图片。这里最关键的一点是极简的外部控制模式：外部 UI 通过 `focusNodeById(...)` 驱动定位，而不需要重建图。\n\n## 数据是如何组织的\n\n图数据在 `MyGraph.tsx` 中本地生成。`initializeGraph()` 创建了一个 `JsonNode[]`，其中包含 160 个名称从 `N0` 到 `N159` 的节点，为每个节点赋予 `id`、`text`、`x` 和 `y`，并将这些坐标排布在一个从 `(-500, -500)` 开始",true,500,1782615429348]