JavaScript is required

画布拖拽与滚轮模式切换

这个示例构建了一个全高度的 relation-graph 工作区,用来测试画布对拖拽和滚轮输入的响应方式。图本身是刻意保持通用的:一个居中的示例网络、使用云朵图标渲染节点、带有一个浮动的白色工具窗口,并且没有任何会分散注意力的业务领域叠加层。

在 GraphPilot 中编辑

浮动画布工作区中的实时拖拽与滚轮模式

这个示例构建了什么

这个示例构建了一个全高度的 relation-graph 工作区,用来测试画布对拖拽和滚轮输入的响应方式。图本身是刻意保持通用的:一个居中的示例网络、使用云朵图标渲染节点、带有一个浮动的白色工具窗口,并且没有任何会分散注意力的业务领域叠加层。

用户可以在运行时将滚轮模式切换为滚动、缩放或无操作,将画布拖拽模式切换为选择、移动或无操作,点击空白画布区域清除选中状态,通过标题栏拖动辅助窗口,并将当前图视图导出为图片。这个示例的重点不在示例数据,而在于围绕 relation-graph 交互行为构建的运行时控制界面。

数据如何组织

数据直接在 initializeGraph() 内以内联方式声明为一个 RGJsonData 对象。它设置了 rootId: '2',定义了 24 个硬编码节点,以及 23 条硬编码连线。这个结构通过 setJsonData(...) 直接加载,然后在视口中居中并适配显示。

在调用 setJsonData(...) 之前没有任何预处理流程。这个示例不会转换外部