项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

弧长连接图 arc ​

线性排布的两两关系表达:节点沿横轴均布,关系画成上半椭圆弧,弧越粗关系越重。供应链供需、航线流量、人物关系这类「谁和谁有关系、关系有多重」的平面化读法——比环形弦图更贴近「左右两端」的直觉;需要闭合视角时一键切环形形态。

何时使用 ​

  • 数据是成对关系(A↔B 有往来),不是守恒流动(那用桑基图);
  • 节点有天然顺序(供应链上下游、流程阶段),线性轴正好承接;
  • 关心「最强关系是哪几条」——线宽按关系值映射,粗细即重要度;
  • 关系密集、想强调闭合回路时用环形形态(arcCircular: true)。

示例 ​

数据字段 arcData({ nodes, links },与桑基同构)。节点均布水平轴、名称在轴下,连接为上半椭圆弧,弧高随节点距离自适应;线宽 1.5–6px 按关系值线性映射,颜色继承源节点色。

供应链供需关系 ​

月度订单量沿「原料 → 总装 → 区域仓 → 门店」流动:跨过中间环节的直达关系(原料 A 直供门店)在弧上一眼可见,最粗的弧就是主干道。

团队协作强度 ​

悬浮某条弧:强调自身、淡化其余;悬浮节点:与它相连的全部弧一起点亮,「设计到底和谁协作最密」顺着颜色就能读。

环形弧长连接图 ​

arcCircular: true 把节点排成圆周、连接为过圆心的弧线——弧长连接图的环形形态,适合关系密集、想强调闭合回路的网络;线宽同样按关系值映射,颜色继承源节点色。

配置要点 ​

  • links[].value 决定线宽(1.5–6px),建议先归一或截断极端值;
  • arcCircular: true 切环形形态(节点排圆周、连接过圆心,即弧长连接图的闭环视角);
  • 图例点选节点即隐去该节点与全部相连关系,剩余重新布局;
  • 节点名超长自动按列宽省略,完整名在 tooltip。

相关 ​