d3-chord
和弦图可视化图中一组节点之间的流动，例如有限状态之间的转移概率。上图显示了来自 Circos 的一个虚假数据集，关于染发的人群。
🌐 Chord diagrams visualize flow between a set of nodes in a graph, such as transition probabilities between finite states. The diagram above shows a fake dataset from Circos of people who dyed their hair.
D3 的和弦布局使用一个大小为 n×n 的方形矩阵来表示流量，其中 n 是图中的节点数量。每个值 matrix[我][j] 表示从第 i 个节点到第 j 个节点的流量。（每个数字 matrix[我][j] 必须为非负数，不过如果从节点 i 到节点 j 没有流量，则可以为零。）
🌐 D3’s chord layout represents flow using a square matrix of size n×n, where n is the number of nodes in the graph. Each value matrix[i][j] represents the flow from the ith node to the jth node. (Each number matrix[i][j] must be nonnegative, though it can be zero if there is no flow from node i to node j.)
上图中，每一行和每一列代表一种发色（black、 blond、 brown、 red）；每个数值代表染发从一种颜色变成另一种颜色的人数。例如，5,871 人原本是 black 发色并染成了 blond，而 1,951 人原本是 blond 发色并染成了 black。矩阵对角线表示保持原发色的人数。
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
];弦图通过将人群按起始颜色沿圆的周长排列，并在各颜色之间绘制带状图来可视化这些转换。带状图的起始和结束宽度与拥有相应起始和结束颜色的人数成比例。带状图的颜色任意选择为两个值中较大的颜色。
🌐 A chord diagram visualizes these transitions by arranging the population by starting color along the circumference of a circle and drawing ribbons between each color. The starting and ending width of the ribbon is proportional to the number of people that had the respective starting and ending color. The color of the ribbon, arbitrarily, is the color with the larger of the two values.
请参阅以下之一：
🌐 See one of: