d3.js绘制弦图详解

1,引入d3.js这里主要采用引用线上的你也可以到官网下载引入本地的

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

2,确定数据结构,这里用到的是5*5的矩阵数据

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

3,创建弦图布局,这里有几个属性我要解释一下,padding设定或获取节点之间的距离,sortSubgroups对各节点所在的行进行排序,d3.ascending是 比较函数,matrix设定或获取矩阵,这里的矩阵必须是行列相等的。groups返回节点数组,chords返回弦数组。

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

4,转换后返回的节数组index行号索引,从0开始,startAngle孤的起始角度,end孤终止角度,value为该行所有数值的和.

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

5,转换后近回的弦数组index为行号subindex为列号start孤的起始解度,endAngle孤的终止角度,value为矩阵(行,列)的值

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

6,有了转换后的数据之后就开始绘制,先绘制画布

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

7,绘制完画布之后分别添加三个g元素用于将绘制点移到画布的中心位置,添加节点和添加弦

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

8,创建颜色比列尺和孤生成器

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

9,绘制孤,这里有一个d3的属性我解释一下selectAll选择所有元素和select相对,select只选择一个元素,arcOuter是在上下步创建的孤生成器,这里使用了路径来绘制,不懂路径的可以看一下svg

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

10,生成孤的效果

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

11,为孤上添加文字,在绘制之前要对文字进行平移和旋转使其文字在合适的位置,这里用到了each函数是对选择集的元素都调用其参数的function(d,i),这里目的是给其添加二个变量angle,name

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

12,终于到最后一步了给孤内添加弦,那么就算绘制完弦图了,简单吧!。

《d3.js绘制弦图详解》
《d3.js绘制弦图详解》

    原文作者:何以相忘
    原文地址: https://zhuanlan.zhihu.com/p/50188215
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞