作者Observable

外观

d3-chord ​

29,630 black0k5k10k15k20k25k20,230 blond0k5k10k15k20k40,290 brown0k5k10k15k20k25k30k35k40k9,850 red0k5k11,975 black → black5,871 black → blond 1,951 blond → black8,916 black → brown 8,010 brown → black2,868 black → red 1,013 red → black10,048 blond → blond16,145 brown → blond 2,060 blond → brown6,171 blond → red 990 red → blond8,090 brown → brown8,045 brown → red 940 red → brown6,907 red → redFork ↗︎

弦图可视化图表中节点集之间的流动，例如有限状态之间的转换概率。上面的图表显示了来自 Circos 的一个虚假数据集，数据为染头发的人。

D3 的弦图布局使用大小为 n×n 的方形 矩阵 来表示流，其中 n 是图表中节点的数量。每个值 matrix[i][j] 表示从第 i 个节点到第 j 个节点的流。(每个数字 matrix[i][j] 必须是非负的，但如果从节点 i 到节点 j 没有流，则可以为零。)

在上面，每一行和每一列代表一种头发颜色 (黑色, 金色, 棕色, 红色)；每个值代表染发从一种颜色变到另一种颜色的人数。例如，5,871 人拥有 黑色 头发并染成了 金色，而 1,951 人拥有 金色 头发并染成了 黑色。矩阵的对角线代表保持相同颜色的人。

js
const matrix = [
  // to black, blond, brown, red
  [11975,  5871, 8916, 2868], // from black
  [ 1951, 10048, 2060, 6171], // from blond
  [ 8010, 16145, 8090, 8045], // from brown
  [ 1013,   990,  940, 6907]  // from red
];

弦图通过 排列 圆周上的起始颜色来可视化这些转换，并绘制从每种颜色到另一种颜色之间的 带状图。带状图的起始宽度和结束宽度与具有相应起始颜色和结束颜色的人数成正比。带状图的颜色任意选择，以两个值中较大的那个为准。

查看以下内容之一