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)  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值