上一篇: 日历热力图
下一篇: 径向树图
代码结构和初始化画布的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)