D3 二维图表的绘制系列（二十八）关系图-弦图 chord

上一篇： 日历热力图

下一篇： 径向树图

代码结构和初始化画布的Chart对象介绍，请先看 这里

本图完整的源码地址： 这里

1 图表效果

2 数据

{
   
   
  "citys": ["北京","上海","广州","深圳","香港"],
  "population": [
    [1000,3015,4567,1234,3714],
    [3214,2000,2060,124,3234],
    [8761,6545,3000,8045,647],
    [3211,1067,3214,4000,1006],
    [2146,1034,6745,4764,5000]
  ]
}

3 关键代码

导入数据

d3.json('./data.json').then(function(data){
   
   
.....

一些样式配置，例如内外半径

const config = {
   
   
        margins: {
   
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        title: '弦图',
        hoverColor: 'white',
        innerRadius: 110,
        outerRadius: 130
    }

传入矩阵，进行数据和尺度的转换，调用d3.chord，配置弦图的布局信息，经处理后的数据将被转换为类似于树的节点+边的组合

/* ----------------------------尺度转换------------------------  */
    const chord = d3.chord()
                    .padAngle(0.1)
                    .sortGroups(d3.descending)     // 环状弦排列顺序
                    .sortSubgroups(d3.descending