[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:world-map-graph-overlay-snapshots":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 世界地图图谱叠加与快照回放\n\n## 这个示例构建了什么\n这个示例在内置的世界 SVG 之上构建了一个固定位置的 relation-graph。画面组合了一个浅色的 2000 x 857 世界地图、5 个小型橙色圆形节点、4 条橙色连线、内置图谱工具栏，以及一个浮动的白色工具窗口。用户可以平移或缩放画布、将当前图谱保存为带时间戳的快照、点击某条已保存记录重新打开快照、将浮动窗口切换到画布设置模式，并导出图片。这个示例的重点并不是地理分析，而是一种组合模式：把 relation-graph 内容放置到地图形背景上的指定坐标位置。\n\n## 数据是如何组织的\n主数据集以内联 `RGJsonData` 的形式定义在 `MyGraph.tsx` 中。它包含一个 `rootId`、5 个带显式 `x` 和 `y` 坐标的节点，以及 4 条带有 id、动画值和可选连线形状覆写的连线。在调用 `setJsonData()` 之前没有任何布局预处理。世界地图也不是由图谱数据生成的，它来自一个单独的 `MapSvg4World` 组件；该组件渲染一个大型静态 SVG，并被插入到图谱内容的后方。\n\n在运行",true,500,1782615414418]