1,引入d3.js这里主要采用引用线上的你也可以到官网下载引入本地的
2,确定数据结构,这里用到的是5*5的矩阵数据
3,创建弦图布局,这里有几个属性我要解释一下,padding设定或获取节点之间的距离,sortSubgroups对各节点所在的行进行排序,d3.ascending是 比较函数,matrix设定或获取矩阵,这里的矩阵必须是行列相等的。groups返回节点数组,chords返回弦数组。
4,转换后返回的节数组index行号索引,从0开始,startAngle孤的起始角度,end孤终止角度,value为该行所有数值的和.
5,转换后近回的弦数组index为行号subindex为列号start孤的起始解度,endAngle孤的终止角度,value为矩阵(行,列)的值
6,有了转换后的数据之后就开始绘制,先绘制画布
7,绘制完画布之后分别添加三个g元素用于将绘制点移到画布的中心位置,添加节点和添加弦
8,创建颜色比列尺和孤生成器
9,绘制孤,这里有一个d3的属性我解释一下selectAll选择所有元素和select相对,select只选择一个元素,arcOuter是在上下步创建的孤生成器,这里使用了路径来绘制,不懂路径的可以看一下svg
10,生成孤的效果
11,为孤上添加文字,在绘制之前要对文字进行平移和旋转使其文字在合适的位置,这里用到了each函数是对选择集的元素都调用其参数的function(d,i),这里目的是给其添加二个变量angle,name
12,终于到最后一步了给孤内添加弦,那么就算绘制完弦图了,简单吧!。