[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:us-map-graph-overlay-snapshots":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 带快照回放的美国地图关系图叠加层\n\n## 这个示例构建了什么\n\n这个示例在内置的美国 SVG 地图上方构建了一个小型的固定位置关系图。界面组合了浅蓝色州形状、橙色圆形节点、橙色连线、内置图工具栏，以及一个可拖动的白色工具窗口。用户可以保存当前图状态、回放已保存的快照、打开设置浮层、切换画布滚轮和拖拽行为，并将图导出为图片。\n\n这里的重点是组合方式，而不是地理分析。地图为手工放置的图提供了视觉背景，而图实例本身仍然是一个普通的 `relation-graph` 查看器，并在外围配有快照工具。各州路径带有悬停样式，但代码并没有为地图本身绑定州级事件或数据。\n\n## 数据是如何组织的\n\n初始图数据是在 `initializeGraph()` 内部创建的一个静态 `RGJsonData` 对象。它包含 `rootId: 'R'`、五个带固定 `x` 和 `y` 坐标的节点，以及四条带稳定 id 的连线，另外还有两个连线形状覆盖项。在调用 `setJsonData()` 之前没有预处理步骤：这些坐标已经是最终值，因此图可以在 `fixed` 布局模式下立即渲染。\n\n地图并不是作为图数据编码的",true,500,1782615414586]