如何用JS画树形图

首先，设置弦图的布局，var chord_layout = d3.layout.chord()      .padding(0.03) //节点之间的间隔      .sortSubgroups(d3.descending) //排序      .matrix(population); //输入矩阵，应用此布局转换数据。

然后，population 经过转换后，实际上分成了两部分：groups 和 chords。前者是节点，后者是连线，也就是弦。chords 就是上图中的连线。chords 里面又分为 source 和 target ，也就是连线的两端。

然后，绘制节点，先定义相关变量，很熟悉了，绘制节点（即分组，有多少个城市画多少个弧形），及绘制城市名称，节点位于弦图的外部。节点数组 groups 的每一项，都有起始角度和终止角度，因此节点其实是用弧形来表示的，这与饼状图类似。

然后，就是节点的文字（即城市名称），有两个地方要特别注意。each()：表示对任何一个绑定数据的元素，都执行后面的无名函数 function(d,i) ，函数体里做两件事：计算起始角度和终止角度的平均值，赋值给 d.angle 。

然后，将 city_name[i] 城市名称赋值给 d.name 。transform 的参数：用 translate 进行坐标变换时，要注意顺序： rotate -> translate（先旋转再平移）。 此外， ( d.angle > Math.PI*3/4 && d.angle < Math.PI*5/4 ) ? 'rotate(180)' : '')意思是，当角度在 135° 到 225° 之间时，旋转 180°。不这么做的话，下方的文字是倒的。