D3.js画图：极坐标

前言

一般画图都采用直角坐标系，偶尔也会采用极坐标系。

直角坐标系已经很熟悉了，不赘述了。

极坐标是二维坐标系，有两个坐标轴，r（半径坐标）和θ（角坐标）。
r:从极点开始衍生的长度；θ：角度。
通过这两个坐标(r,θ)可以确定一个点的位置。

看图就明白我在说什么了。

极坐标.png

极坐标画出的图

画图一般采用横纵坐标系，但有时画封闭路径图或者比较有规律的散点图就可以用极坐标。
我把曾画过的极坐标系的图上传看下极坐标系的特点：

极坐标1.png

极坐标2.png

极坐标3.png

1. 一圈一圈灰色虚线就是极坐标的坐标系，可以看出有从中心往外扩散的趋势。
2. 横纵坐标系有x轴和y轴，然后通过(x,y)值来确定位置，那极坐标是否也有类似x轴y轴呢？
3. 极坐标是通过角度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