自定义连线文字位置
这个示例构建了一棵小型树图,可对比分离标签与路径贴合文字两种边标签模式。悬浮控制窗可调节标签 x/y 偏移、树方向重排以及默认线形切换,是一个用于连线文字可读性调优的紧凑参考。
在树状关系图中调整连线文本位置
这个示例构建了什么
这个示例构建了一个小型树状图,用来对比边标签在不同渲染规则下的表现。画布展示了一个固定的子系统层级结构,同时一个悬浮控制窗口允许用户在分离标签和沿连线路径渲染的文本之间切换,通过 x 和 y 偏移移动标签,旋转树的方向,并切换连接线形状。
视觉上的主要关注点是连线文本本身。蓝色标签样式、克制的节点样式以及紧凑的数据集,让注意力集中在可读性变化上,而不是领域特定内容上。
数据是如何组织的
图数据是在 initializeGraph() 内部创建的一个静态内联 RGJsonData 对象。它使用 rootId: '2',包含九个节点和八条连线,并且每条连线都带有相同的 text: 'Subsystem' 标签,这样该示例就能把关注点放在标签位置行为上,而不是内容差异上。
这里没有外部获取步骤,也没有在 setJsonData() 之前对每条连线进行预处理。关键准备工作发生在 options 对象中:defaultLineShape、defaultJunctionPoint、`defa