[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:industry-chain-group-layout-editor":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 产业价值链看板上的可编辑树形分组\n\n## 这个示例构建了什么\n\n本示例构建了一个三阶段产业价值链看板，其中可见卡片里的每一行都锚定一棵独立的 relation-graph 树。用户看到的是上游、中游和下游业务画布，而实际的图节点则从这些卡片行向外扩展，而不是取代它们。\n\n这个体验兼具查看器和轻量编辑器两种角色。用户可以点击任意可见图节点来选中其所属的整个分组，借助对齐辅助线拖动该选中分组，在浮动面板中调整分组级别的节点、连线和树布局选项，删除当前选中的分组，或者在特定阶段卡片行之前或之后插入一棵新生成的树。这里最重要的理念是：普通 HTML 业务卡片仍然是页面可见的骨架，而 relation-graph 则围绕这些卡片渲染可编辑的树形簇。\n\n## 数据如何组织\n\n源模型起始于 [`my-data.ts`](/Users/gaokui/WebstormProjects/relation-graph-site-react/src/v3-examples/industry-chain-group-layout-editor//my-data.ts) 中三列嵌套的 `JsonNode` 树",true,500,1782615391276]