[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:performance-test-tree-layout":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 在性能模式下借助实时运行时控制对树形布局进行压力测试\n\n## 这个示例构建了什么\n\n这个示例构建的是一个全屏树形布局压力测试工作台，而不是面向具体业务的查看器。它会渲染一个合成层级结构，并配有自定义员工卡片风格节点、带彩色标签的连接线、一个悬浮控制窗口，以及右下角的迷你视图。\n\n用户可以在六个数据集规模预设之间切换，重新调整树的方向和间距，实时修改连接线样式，改变画布的滚轮和拖拽行为，并导出图片。这个示例的重点在于：它在启用更丰富展示层的同时，使用 `performanceMode` 运行 relation-graph 内置的 `tree` 布局。\n\n## 数据如何组织\n\n数据起始于一个内联的 `RGJsonData` 种子对象，其中包含 `rootId: 'a'`、一个扁平的 `nodes` 数组，以及一个扁平的 `lines` 数组。这个种子本身已经形成一棵树，而 `generateTestJsonData(testDataSize)` 会先克隆它，再继续添加更多后代节点。\n\n这里的预处理步骤很关键。对于每个 id 中包含 `-` 的节点，生成器都会继续追加更多子节点和边。当 ",true,500,1782615386463]