1、首先，设置弦图的布局，var chord_layout = d3.layout.chord() .padding(0.03) //节点之间的间隔 .sortSubgroups(d3.descending) //排序 .matrix(population); //输入矩阵，应用此布局转换数据。
2、然后，population 经过转换后，实际上分成了两部分：groups 和 chords。前者是节点，后者是连线，也就是弦。chords 就是上图中的连线。chords 里面又分为 source 和 target，也就是连线的两端。
3、然后，绘制节点，先定义相关变量，很熟悉了，绘制节点（即分组，有多少个城市画多少个弧形），及绘制城市名称，节点位于弦图的外部。节点数组 groups 的每一项，都有起始角度和终止角度，因此节点其实是用弧形来表示的，这与饼状图类似。
4、然后，就是节点的文字（即城市名称），有两个地方要特别注意。each()：表示对任何一个绑定数据的元素，都执行后面的无名函数 function(d,i) ，函数体里做两件事：计算起始角度和终止角度的平均值，赋值给 d.angle 。
5、然后，将 city_name[i] 城市名称赋值给 d.name 。trans酆璁冻嘌form 的参数：用 trans造婷用痃late 进行坐标变换时，要注意顺序： rotate -> translate（先旋转再平移）。 此外， ( d.angle > Math.PI*3/4 && d.angle < Math.PI*5/4 ) ? "rotate(180)" : "")意思是，当角度在 135° 到 225° 之间时，旋转 180°。不这么做的话，下方的文字是倒的。
6、最后，绘制连线（弦），绘制连线（即所有城市人口的来源，即有 5 * 5 = 25 条弧），SVG 中没有现成的弦元素（例如圆有 <circle>，但是弦却没有 <chord>），需要用路径元素 <path> 来制作。至于路径值是什么呢？我们不需要手动计算，D3 提供了 d3.svg.chord() ，只需要将弦的对象传递给它，即可得到路径值。
