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[i][j] 表示从第 i 个节点到第 j 个节点的流向。（每个数字 matrix[i][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。矩阵对角线表示保持相同颜色的人。
¥Above, each row and column represents a hair color (black, blond, brown, red); each value represents a number of people who dyed their hair from one color to another color. For example, 5,871 people had black hair and dyed it blond, while 1,951 people had blond hair and dyed it black. The matrix diagonal represents people who kept the same color.
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
];弦图通过 arranging 表示种群，即沿着圆的圆周开始颜色，并在每种颜色之间绘制 ribbons，来可视化这些转变。丝带的起始和结束宽度与具有相应起始和结束颜色的人数成正比。色带的颜色任意为两个值中较大者。
¥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: