d3.js 绘制极坐标图(polar plot)

0.引言

在极坐标系中，任意位置可由一个夹角和一段相对原点（极点）的距离表示。也就是说，我们可以用 (angle,r) 来表示极坐标系中的点。

 

1.数据

假设我们有如下数据集[ [10, 0.2], [6, 0.5], [23, 0.9],... ]。其中每个数据的一维表示时间(24小时制)，二维表示信号强度。如[10, 0.2]表示十点的信号强度为0.2。现在，我们要将这些数据呈现在极坐标图(polar plot)上：

 

2.比例尺

我们发现，源数据的一维并不直接表示角度，二维也并不直接表示距离。那么我们需要用到比例尺。比例尺就是将某一区域的值映射到另一区域，其大小关系不变。

由于我们的区间都是连续的（连续的24小时映射到连续的360°，信号强度值映射到半径值），故这里我们用到的是线性比例尺。

1 var angle = d3.scale.linear()
2               .domain([0, 24])
3               .range([0, 2 * Math.PI]);
4 
5 var r = d3.scale.linear()
6           .domain([0, max_singnal])
7           .range([0, radius]);

 

 

3.坐标系

为了清晰地呈现数据，绘制角度坐标轴（每45°画一条线）和半径坐标轴（半径每递增0.1画一个圆）。以及标上刻度。

// 角度坐标轴
 1     var ga = svg.append("g")
 2           .attr("class", "a axis")
 3           .selectAll("g")
 4           .data(d3.range(-90, 270, 45))
 5           .enter().append("g")
 6           .attr("transform", function(d) {
 7             return "rotate(" + d + ")";
 8         });
 9 
10     ga.append("line")
11         .attr("x2", radius);
12      
13     ga.append("text")
14         .attr("x", radius + 6