D3 - 向极坐标图添加标签

Question

我发现this 工作示例如何使用 D3 创建极坐标图。我想不通的是如何在绘图之外的主轴上添加标签（罗盘标签，如 N、E、S、W）。

还可以为绘图内半径的距离缩放标签。我所做的只是重叠并旋转到看似任意的方向。

Answer 1

我只是创建一个虚拟数据结构，键是名称，值是我想要的角度。然后使用一些基本的三角函数来正确定位节点。

var width = 960,
  height = 500,
  radius = Math.min(width, height) / 2 - 30;

var r = d3.scale.linear()
  .domain([0, 1])
  .range([0, radius]);

var line = d3.svg.line.radial()
  .radius(function(d) {
    return r(d[1]);
  })
  .angle(function(d) {
    return -d[0] + Math.PI / 2;
  });

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

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);

var ga = svg.append("g")
  .attr("class", "a axis")
  .selectAll("g")
  .data(d3.range(0, 360, 30))
  .enter().append("g")
  .attr("transform", function(d) {
    return "rotate(" + -d + ")";
  });

ga.append("line")
  .attr("x2", radius);

var color = d3.scale.category20();

var line = d3.svg.line.radial()
  .radius(function(d) {
    return r(d[1]);
  })
  .angle(function(d) {
    return -d[0] + Math.PI / 2;
  });

var data = [
  [Math.PI / 3, Math.random()],
  [Math.PI / 6, Math.random()],
  [0 * Math.PI, Math.random()],
  [(11 * Math.PI) / 6, Math.random()],
  [(5 * Math.PI / 3), Math.random()],
  [(3 * Math.PI) / 2, Math.random()],
  [(4 * Math.PI / 3), Math.random()],
  [(7 * Math.PI) / 6, Math.random()],
  [Math.PI, Math.random()],
  [(5 * Math.PI) / 6, Math.random()],
  [(2 * Math.PI) / 3, Math.random()],
  [Math.PI / 2, Math.random()]
];

var angles = {
  N: 0,
  E: Math.PI / 2,
  S: Math.PI,
  W: 3 * Math.PI / 2,
};

svg.selectAll("point")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "point")
  .attr("transform", function(d) {
    var coors = line([d]).slice(1).slice(0, -1);
    return "translate(" + coors + ")"
  })
  .attr("r", 8)
  .attr("fill", function(d, i) {
    return color(i);
  });

svg.selectAll(".angle")
  .data(Object.keys(angles))
  .enter()
  .append("text")
  .attr("class", "angle")
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle")
  .attr("transform", function(d) {
    // Subtract because 0degrees is up at (0, 1) on the unit circle, but
    // 0 radians is to the right, at (1, 0)
    var angle = angles[d] - Math.PI / 2;
    var textRadius = radius + 20;
    var x = Math.cos(angle) * textRadius;
    var y = Math.sin(angle) * textRadius;
    return "translate(" + [x, y] + ")";
  })
  .text(function(d) { return d; })

.frame {
  fill: none;
  stroke: #000;
}

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis circle {
  fill: none;
  stroke: steelblue;
  stroke-dasharray: 4;
}

.axis:last-of-type circle {
  stroke: steelblue;
  stroke-dasharray: none;
}

.line {
  fill: none;
  stroke: orange;
  stroke-width: 3px;
}

<script src="//d3js.org/d3.v3.min.js"></script>