前言

一般畫圖都采用直角坐標(biāo)系，偶爾也會采用極坐標(biāo)系。

直角坐標(biāo)系已經(jīng)很熟悉了，不贅述了。

極坐標(biāo)是二維坐標(biāo)系，有兩個坐標(biāo)軸，r（半徑坐標(biāo)）和θ（角坐標(biāo)）。
r:從極點開始衍生的長度；θ：角度。
通過這兩個坐標(biāo)(r,θ)可以確定一個點的位置。

看圖就明白我在說什么了。

極坐標(biāo).png

極坐標(biāo)畫出的圖

畫圖一般采用橫縱坐標(biāo)系，但有時畫封閉路徑圖或者比較有規(guī)律的散點圖就可以用極坐標(biāo)。
我把曾畫過的極坐標(biāo)系的圖上傳看下極坐標(biāo)系的特點：

極坐標(biāo)1.png

極坐標(biāo)2.png

極坐標(biāo)3.png

1. 一圈一圈灰色虛線就是極坐標(biāo)的坐標(biāo)系，可以看出有從中心往外擴散的趨勢。
2. 橫縱坐標(biāo)系有x軸和y軸，然后通過(x,y)值來確定位置，那極坐標(biāo)是否也有類似x軸y軸呢？
3. 極坐標(biāo)是通過角度a和長度r來確定位置，從中心點向上這條線就是0°，往右就是90°，以此類推；長度r也可以說是半徑r，從中心點沿著角度a所到達的長度，這就確定了一個點的位置了。比如(45, 10)，表示45°方向長度為10的點。

畫極坐標(biāo)代碼

畫極坐標(biāo)兩個步驟：
1.角度坐標(biāo)軸：就是從極點按照幾個角度衍生出線；
2.半徑坐標(biāo)軸：就是一圈一圈畫不同半徑的圓形。

  // 角度坐標(biāo)軸
  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;
    });

  // 半徑坐標(biāo)軸
  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");

效果圖如下，是不是有點像瞄準(zhǔn)鏡頭：

極坐標(biāo).png