前言
一般画图都采用直角坐标系，偶尔也会采用极坐标系。
直角坐标系已经很熟悉了，不赘述了。
极坐标是二维坐标系，有两个坐标轴，r（半径坐标）和θ（角坐标）。
r:从极点开始衍生的长度；θ：角度。
通过这两个坐标(r,θ)可以确定一个点的位置。
看图就明白我在说什么了。
极坐标.png
极坐标画出的图
画图一般采用横纵坐标系，但有时画封闭路径图或者比较有规律的散点图就可以用极坐标。
我把曾画过的极坐标系的图上传看下极坐标系的特点：
极坐标1.png
极坐标2.png
极坐标3.png
- 一圈一圈灰色虚线就是极坐标的坐标系，可以看出有从中心往外扩散的趋势。
- 横纵坐标系有x轴和y轴，然后通过(x,y)值来确定位置，那极坐标是否也有类似x轴y轴呢？
- 极坐标是通过角度a和长度r来确定位置，从中心点向上这条线就是0°，往右就是90°，以此类推；长度r也可以说是半径r，从中心点沿着角度a所到达的长度，这就确定了一个点的位置了。比如(45, 10)，表示45°方向长度为10的点。
画极坐标代码
画极坐标两个步骤：
1.角度坐标轴：就是从极点按照几个角度衍生出线；
2.半径坐标轴：就是一圈一圈画不同半径的圆形。
// 角度坐标轴
var ga = svg
.append("g")
.attr("class", "a axis")
.selectAll("g")
.data(d3.range(-90, 270, 45))
.enter()
.append("g")
.attr("transform", function (d) {
return "rotate(" + d + ")";
});
ga.append("line").attr("x2", radius);
ga.append("text")
.attr("x", radius + 6)
.attr("dy", ".35em")
.style("text-anchor", function (d) {
return d < 270 && d > 90 ? "end" : null;
})
.attr("transform", function (d) {
return d < 270 && d > 90
? "rotate(180 " + (radius + 6) + ",0)"
: null;
});
// 半径坐标轴
var gr = svg
.append("g")
.attr("class", "r axis")
.selectAll("g")
.data(r.ticks(3).slice(1))
.enter()
.append("g");
gr.append("circle").attr("r", r);
gr.append("text")
.attr("y", function (d) {
return -r(d) - 4;
})
.attr("transform", "rotate(20)")
.style("text-anchor", "middle");
效果图如下，是不是有点像瞄准镜头：
极坐标.png
