D3 - 向极坐标图添加标签

Question

我发现这个工作示例如何使用 D3 创建极坐标图。我不知道如何将标签（罗盘标签，如 N、E、S、W）添加到绘图外部的主轴上。

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

Answer 1

我只是创建一个虚拟数据结构，键是名称，值是我想要的角度。然后使用一些基本的三角学来正确定位节点。var width = 960,&nbsp; height = 500,&nbsp; radius = Math.min(width, height) / 2 - 30;var r = d3.scale.linear()&nbsp; .domain([0, 1])&nbsp; .range([0, radius]);var line = d3.svg.line.radial()&nbsp; .radius(function(d) {&nbsp; &nbsp; return r(d[1]);&nbsp; })&nbsp; .angle(function(d) {&nbsp; &nbsp; return -d[0] + Math.PI / 2;&nbsp; });var svg = d3.select("body").append("svg")&nbsp; .attr("width", width)&nbsp; .attr("height", height)&nbsp; .append("g")&nbsp; .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");var gr = svg.append("g")&nbsp; .attr("class", "r axis")&nbsp; .selectAll("g")&nbsp; .data(r.ticks(3).slice(1))&nbsp; .enter().append("g");gr.append("circle")&nbsp; .attr("r", r);var ga = svg.append("g")&nbsp; .attr("class", "a axis")&nbsp; .selectAll("g")&nbsp; .data(d3.range(0, 360, 30))&nbsp; .enter().append("g")&nbsp; .attr("transform", function(d) {&nbsp; &nbsp; return "rotate(" + -d + ")";&nbsp; });ga.append("line")&nbsp; .attr("x2", radius);var color = d3.scale.category20();var line = d3.svg.line.radial()&nbsp; .radius(function(d) {&nbsp; &nbsp; return r(d[1]);&nbsp; })&nbsp; .angle(function(d) {&nbsp; &nbsp; return -d[0] + Math.PI / 2;&nbsp; });var data = [&nbsp; [Math.PI / 3, Math.random()],&nbsp; [Math.PI / 6, Math.random()],&nbsp; [0 * Math.PI, Math.random()],&nbsp; [(11 * Math.PI) / 6, Math.random()],&nbsp; [(5 * Math.PI / 3), Math.random()],&nbsp; [(3 * Math.PI) / 2, Math.random()],&nbsp; [(4 * Math.PI / 3), Math.random()],&nbsp; [(7 * Math.PI) / 6, Math.random()],&nbsp; [Math.PI, Math.random()],&nbsp; [(5 * Math.PI) / 6, Math.random()],&nbsp; [(2 * Math.PI) / 3, Math.random()],&nbsp; [Math.PI / 2, Math.random()]];var angles = {&nbsp; N: 0,&nbsp; E: Math.PI / 2,&nbsp; S: Math.PI,&nbsp; W: 3 * Math.PI / 2,};svg.selectAll("point")&nbsp; .data(data)&nbsp; .enter()&nbsp; .append("circle")&nbsp; .attr("class", "point")&nbsp; .attr("transform", function(d) {&nbsp; &nbsp; var coors = line([d]).slice(1).slice(0, -1);&nbsp; &nbsp; return "translate(" + coors + ")"&nbsp; })&nbsp; .attr("r", 8)&nbsp; .attr("fill", function(d, i) {&nbsp; &nbsp; return color(i);&nbsp; });svg.selectAll(".angle")&nbsp; .data(Object.keys(angles))&nbsp; .enter()&nbsp; .append("text")&nbsp; .attr("class", "angle")&nbsp; .attr("text-anchor", "middle")&nbsp; .attr("dominant-baseline", "middle")&nbsp; .attr("transform", function(d) {&nbsp; &nbsp; // Subtract because 0degrees is up at (0, 1) on the unit circle, but&nbsp; &nbsp; // 0 radians is to the right, at (1, 0)&nbsp; &nbsp; var angle = angles[d] - Math.PI / 2;&nbsp; &nbsp; var textRadius = radius + 20;&nbsp; &nbsp; var x = Math.cos(angle) * textRadius;&nbsp; &nbsp; var y = Math.sin(angle) * textRadius;&nbsp; &nbsp; return "translate(" + [x, y] + ")";&nbsp; })&nbsp; .text(function(d) { return d; }).frame {&nbsp; fill: none;&nbsp; stroke: #000;}.axis text {&nbsp; font: 10px sans-serif;}.axis line,.axis circle {&nbsp; fill: none;&nbsp; stroke: steelblue;&nbsp; stroke-dasharray: 4;}.axis:last-of-type circle {&nbsp; stroke: steelblue;&nbsp; stroke-dasharray: none;}.line {&nbsp; fill: none;&nbsp; stroke: orange;&nbsp; stroke-width: 3px;}<script src="//d3js.org/d3.v3.min.js"></script>