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

最新推荐文章于 2025-04-02 21:57:08 发布

PAT-python-zjw

最新推荐文章于 2025-04-02 21:57:08 发布

阅读量5.5k

点赞数 1

分类专栏： D3.js 二维图表系列文章标签： d3

本文为博主原创文章，转载请务必附上文章网址，谢谢。

本文链接：https://blog.youkuaiyun.com/zjw_python/article/details/101027698

版权

上一篇：日历热力图

下一篇：径向树图

代码结构和初始化画布的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)