[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:pattern-switchable-tape-lines":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 树形图上的可切换图案填充带状连线\n\n## 这个示例构建了什么\n\n这个示例构建了一个小型树形查看器，其中每条关系都被渲染为填充的带状连线，而不是标准的描边边线。画布使用深色网格背景、洋红色矩形节点，以及一个悬浮的辅助窗口，允许用户在运行时重新设置所有可见带状连线的样式。\n\n用户可以在线条填充样式之间切换，包括普通的半透明颜色和多种 SVG 图案预设，其中包含动态条纹、波浪、箭头和彩虹流动效果。最关键的细节在于，这个示例并不是简单地装饰内置线条。它使用自定义 slot 渲染的 SVG path 替换了可见边的表面，同时仍然保留了 relation-graph 正常的线条点击行为。\n\n## 数据是如何组织的\n\n图数据直接在 `initializeGraph()` 内部以内联方式声明为一个 `RGJsonData` 对象，其中包含 `rootId`、扁平的 `nodes` 数组和扁平的 `lines` 数组。这个示例树包含九个节点和八条 `from`/`to` 连接，并在一次 `setJsonData()` 调用中全部加载完成。\n\n在加载 JSON 之前没有显式的预处理步骤。自定义几何计算",true,500,1782615381314]