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

弦图 chord ​

环形排布的两两关系表达:节点均匀分布在圆周,连接带过圆心收束,带宽即关系强度。部门协作网络、供需匹配、航线流量这类「谁和谁有关系、关系有多重」的闭合读法——关系密集时比线性弧长图更省墨。

何时使用 ​

  • 数据是成对关系(A↔B 有往来),不是守恒流动(那用桑基图);
  • 关心「最强关系是哪几条」——连接带按值定宽,粗细即重要度;
  • 节点建议 4–12 个;关系太多时先按值截断取 Top N;
  • 节点有天然先后顺序、想沿直线读时改用弧长连接图。

示例 ​

数据字段 chordData({ nodes, links },与桑基同构)。节点弧默认均布,chordByValue: true 改按出入度占比;连接带颜色继承源节点色,同源同色不追色。

跨部门协作密度 ​

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

城市航线流量 ​

chordByValue: true 让枢纽城市的弧段自动变长(弧长按出入度和占比),连接带的粗细对比也更均衡——航线网络里谁枢纽、哪条线最忙,一张图读完。

配置要点 ​

  • links[].value 决定带宽,建议先归一或截断极端值;
  • chordByValue: true 时节点弧长按值占比(默认均布);
  • 节点圆点 + 弧线连接的环形弧长形态在 弧长连接图(arcCircular: true);
  • 图例点选节点即隐去该节点与全部相连关系,剩余重新布局;
  • 节点名沿圆周外侧排布,按角度自动对齐左右;完整关系值在 tooltip。

相关 ​