[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:canvas-multi-node-selection":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 带实时状态反馈的画布多节点选择\n\n## 这个示例构建了什么\n\n这个示例构建了一个全高度图查看器，用于通过拖拽矩形框选择多个现有节点。用户会看到一个居中的图标式网络、一个悬浮辅助窗口、一个可在框选与移动之间切换画布拖拽行为的模式开关，以及一个用于实时显示当前已选节点数量的计数器。这个示例的重点不是图编辑，而是把 relation-graph 的框选能力转化为一个明确的多节点选择工作流，并为其配套提供周边 UI 反馈。\n\n## 数据是如何组织的\n\n图数据被定义为一个内联的 `RGJsonData` 对象，其中包含固定的 `rootId`、扁平的 `nodes` 数组，以及一个通过父子 id 建立连接关系的 `lines` 数组。加载前没有进行任何特定领域的数据转换；数据会直接传给 `setJsonData`，然后将图居中并适配到视口中。在真实产品中，同样的结构可以表示服务依赖、资源清单、拓扑图，或者任何需要让操作人员批量选择现有项目的预制图数据。\n\n## relation-graph 是如何使用的\n\n入口文件通过 `RGProvider` 包裹整个示例，然后 `MyGraph.tsx`",true,500,1782615430351]