Learning D3.js(4) layout之弦图chord的绘制(1)

来源：互联网发布：证券行业研究员知乎编辑：程序博客网时间：2024/05/22 08:04

今天我们将会领略到D3.js最为强大的layout系列可视化的威力。

最终demo:http://jsfiddle.net/U2aCS/

这一次的demo见http://jsfiddle.net/AXJf3/

Chord(弦图)是非常美观漂亮的可视化图表，源自http://mkweb.bcgsc.ca/circos/ 在网站上可以找到大量漂亮的可视化图表案例。

主要用在表格数据的可视化，表达多个节点间的连结关系。在开始使用d3js时，先认识下弦图吧！

使用弦图进行表格数据可视化

不同粗细的连接可以表达关系的程度或者量级

当连接的着色不同时我们可以很容易的区分出来，尤其是当连接具有方向时。

快照4

假如我们有这样一份数据可以表达为a,b=2 b,a=10。对于 a,b =2 这个关系来说，a为行，b为列

baa2 b 10

在弦图中可以利用一根条带来表达这个关系(右图)。注意这根条带连接了a,b ，连接了行列元素，且行列元素的端点粗细不同。那么如何去确定这个粗细呢？大家可以记住，某一端的粗细，对应的是行元素。比如a-b 为2 上表中 a为行元素，因此a那一端的线条粗细程度为2. b-a为10 b为行元素，因此b那一端的线条粗细程度为10. 理解这个很重要。

快照6

这里还有个细节问题。上图的表格中 a:d是2 刚才我们也讲到 a那一端的线条宽度是2.但是当我们不需要表达d a关系时可以在条带与d接触的地方留个空白。

以上的讲解来源于 http://mkweb.bcgsc.ca/circos/guide/tables/ 我简单的翻译了一下。ok那么我们回到d3

layout是干嘛的

在可视化绘制中,graphic drawing一直是非常令人头疼的问题，里面牵扯到很多的算法，对于我这样数学基础不好的人简直是折磨。

而d3.js提供了很多现成的layout，通过调用layout，可以生成排列好的图形，之后我们进行进一步加工就可以了。比如群集(Cluster)图，弦(chord)图，树图,force(引力)图等等，每个layout都有自己独特的属性，与图形本身相关，但是使用方法类似。

现在我们开始可视化绘制！除了使用layout之外，这一次我们也会使用一个核心api arc画圆。

测试数据

    var matrix = [        [11975,  5871, 8916, 2868],        [ 1951, 10048, 2060, 6171],        [ 8010, 16145, 8090, 8045],        [ 1013,   990,  940, 6907]    ];

绘制之前我们先观察一下最终想要的效果。

快照9

最外层有个圆环，上面有刻度。而圆环被数据分为了好几个部分。圆环与圆环之间通过条带连接，且颜色不同。圆环我们可以使用d3的arc方法绘制，而刻度我们之前也用tick配合text绘制过。最重要的就是对圆环的分隔以及条带了，而这正是chord的layout可以提供给我们的。

首先呢建立容器

    var width = 960,            height = 500,            innerRadius = Math.min(width, height) * .41,            outerRadius = innerRadius * 1.1;    var fill =["#000000", "#FFDD89", "#957244", "#F26223"];//颜色数组    var svg = d3.select("body").append("svg")            .attr("width", width)            .attr("height", height)            .append("g")            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");//偏移一下

这里注意 innerRadius跟outerRadius是为了配合我们的arc方法来使用的。

d3.svg.arc()

使用innerRadius-, outerRadius-, startAngle- 与endAngle-来绘制环形。注意这四个值都可以是动态的。

事实上这个api可以绘制四种图形： circle (圆形，当角度>2π且innerradius为0时), circular sector (扇形，当角度<2π且innerradius为0时), annulus (环形，innerRadius不为0，且角度>=2π)，当然也有环形的一部分。

fill是我们准备好的一些颜色。

之后我们需要给圆形留空间，因为圆形绘制的时候是以原点为中心绘制的，而我们的图形原点现在在左上角，所以会出现一个问题就是左边跟上边的图表部分会看不到。因此我们使用translate属性来位移一下即可。

之后我们使用chord这个layout来构建图形

    var chord = d3.layout.chord()            .padding(.05)            .sortSubgroups(d3.descending)            .matrix(matrix);

每个layout提供不同的方法。在chord中提供了一些方法，参考 https://github.com/mbostock/d3/wiki/Chord-Layout

sortSubgroups 传入一个function，这个function规定了每一行中的元素的排列顺序。同样也有sortGroups 这个是规定行的排列顺序。

大家可以回忆下chord的特征，端点都在行元素上。

matrix也是核心方法，很类似data()这个方法，可以给chord绑定数据，并根据数据进行分割。padding是圆环上每个部分之间的距离。

chord使用后可以返回两个东东:chord.groups跟chord.chords，这两个是干什么用的，我们可以看看。

    svg.append("g").selectAll("path")            .data(chord.groups)            .enter().append("path")            .style("fill", function(d) { return fill[d.index] })            .style("stroke", function(d) { return fill[d.index]; })            .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))

这里selectAll跟data,enter的组合想必大家不会陌生了，就是造小房子，不明白的可以去看第一篇教程。通过chord.groups可以把圆环按照数据分组。效果如下：

快照10