d3.layout.chord()

弦图是一种用于描述节点之间联系的图表。

弦图(Chord)的API说明

chord.chords - 取回计算的弦角度。chord.groups - 取回计算的分组角度。chord.matrix - 取得或设置布局需要的矩阵数据。chord.padding - 取得或设置弦片段间的角填充。chord.sortChords - 取得或设置用于弦的比较器（Z轴顺序）。chord.sortGroups - 取得或设置用于分组的比较器。chord.sortSubgroups - 取得或设置用于子分组的比较器。

我们通过一个制作一个弦图来讲解弦布局。

1. 数据

var city_name = ["北京", "上海", "广州", "深圳", "香港"]; var population = [ [1000, 3045, 4567, 1234, 3714], [3214, 2000, 2060, 124, 3234], [8761, 6545, 3000, 8045, 647], [3211, 1067, 3214, 4000, 1006], [2146, 1034, 6745, 4764, 5000] ];

数据是一些城市名和一些数字，这些数字表示城市人口的来源，用表格表示如下：

北京上海广州深圳香港北京10003045456712343714上海3214200020601243234广州8761654530008045647深圳32111067321440001006香港21461034674547645000

左边第一列是被统计人口的城市，上边第一行是被统计的来源城市

2. 数据转换

var chord_layout = d3.layout.chord() .padding(0.03) //节点之间的间隔 .matrix(population); //输入矩阵 var groups = chord_layout.groups(); var chords = chord_layout.chords();

population 经过转换后，实际上分成了两部分：groups 和 chords。前者是节点，后者是连线，也就是弦。

通过弦布局转换数据后，数据被转换成如下形式：

节点

连线

3. 绘制图形

绘制容器

var width = 600; var height = 600; var innerRadius = width / 2 * 0.7; var outerRadius = innerRadius * 1.1; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

定义颜色比例尺

var color20 = d3.scale.category20();

创建圆弧SVG生成器

var outer_arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius);

绘制圆弧路径

var g_outer = svg.append("g"); g_outer.selectAll("path") .data(groups) .enter() .append("path") .style("fill", function(d) { return color20(d.index); }) .style("stroke", function(d) { return color20(d.index); }) .attr("d", outer_arc);

绘制弦图文字

g_outer.selectAll("text") .data(groups) .enter() .append("text") .each(function(d, i) { d.angle = (d.startAngle + d.endAngle) / 2; d.name = city_name[i]; }) .attr("dy", ".35em") .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI) + ")" + "translate(0," + -1.0 * (outerRadius + 10) + ")" + ((d.angle > Math.PI * 3 / 4 && d.angle < Math.PI * 5 / 4) ? "rotate(180)" : ""); }) .text(function(d) { return d.name; });

创建弦图SVG生成器

var inner_chord = d3.svg.chord() .radius(innerRadius);

绘制弦图路径

svg.append("g") .attr("class", "chord") .selectAll("path") .data(chords) .enter() .append("path") .attr("d", inner_chord) .style("fill", function(d) { return color20(d.source.index); }) .style("opacity", 1) .on("mouseover", function(d, i) { d3.select(this) .style("fill", "yellow"); }) .on("mouseout", function(d, i) { d3.select(this) .transition() .duration(1000) .style("fill", color20(d.source.index)); });

查看在线演示