[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:graph-css-theme-switcher":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在同一个关系图树上切换八种 CSS 主题\n\n## 这个示例构建了什么\n\n这个示例渲染了一个从左到右的层级结构，节点采用圆形图标样式，并允许用户在运行时将同一张图切换为八种不同的视觉主题。图数据、布局以及 `RelationGraph` 实例本身保持不变，而外层包装类会从 `my-theme-1` 切换到 `my-theme-8`，因此地图背景、节点表面、连线颜色、选中状态、工具栏外观以及缩略图都会一起变化。\n\n页面是一个全高查看器，画布上方悬浮着一个工具窗口。用户可以拖动这个窗口、最小化它、打开设置浮层、选择主题色块、修改滚轮和拖拽行为，并将当前图导出为图片。\n\n这个示例的重点不在自定义布局逻辑，而在一种面向整张图的 CSS 换肤模式；其中还包含一个重要的运行时更新步骤，用来确保 `RGMiniView` 与当前主题保持颜色同步。\n\n## 数据是如何组织的\n\n图数据在 `initializeGraph()` 内部以内联方式声明为一个 `RGJsonData` 对象。它使用一个 `rootId`、一个扁平的 `nodes` 数组和一个扁平的 `lines` 数组。每个节点都把自己的图",true,500,1782615377951]