relation-graph 示例总览

欢迎来到 relation-graph 示例中心。

这里不是零散的代码片段集合，而是一套面向真实项目的结构化示例库，展示 relation-graph 如何从基础查看器扩展到高级交互编辑系统。

在这个目录中，你将看到 200+ 专业示例，并且它们按清晰的能力分组组织。部分示例会出现在多个分组中，这是有意设计的，方便你从不同问题视角定位同一实现：渲染、布局、交互、编辑、数据流、样式、导出与 API 控制。

你能从这里学到什么

这些分组覆盖了从基础到进阶的完整能力路径：

• 节点 + 线条：通过插槽、CSS 换肤、标签、箭头、动画和自定义边渲染，构建清晰的图谱视觉语言。
• 布局：对比 tree、center、force、folder、混合布局；调优间距与路由；接入 Dagre、Graphology ForceAtlas2、D3 层级布局等外部求解器。
• 使用场景：学习企业股权、投融资探查、产业链分析、拓扑监控等贴近业务的完整图产品形态。
• 图形编辑套件：从只读查看器升级到全编辑流程，覆盖创建、连线、修改、对齐、缩放、撤销重做与进阶创作模式。
• HTML 元素连线 + UI 插槽：把图谱能力与普通 DOM 元素、地图覆盖层、定制工具栏做组合联动。
• 事件、交互与运行时控制：实现框选、悬停/点击高亮、右键菜单、聚焦导航、展开回放与视口控制。
• 数据操作 + 非常规数据：支持分步追加、按需懒加载、外部数据重应用，以及断开/非标准数据结构处理。
• 样式、动画、效果 + 图像导出：提升最终体验质感，并输出整图、可见区域、Base64 图片等多种结果。
• 实例 API：掌握 provider 作用域实例控制与框架级扩展方式（如自定义图核心编排）。

无论你从哪一组开始，这里的示例都不仅是“展示效果”，而是可以直接复用的实现模式。建议按当前问题选一个最贴近的示例，先运行，再拆解配置与组件结构，最后迁移到你的实际图谱流程中。