D3 - 在极坐标图中添加标签

要在D3的极坐标图中添加标签，可以使用以下步骤：

1. 创建一个SVG元素，并设置其宽度和高度。

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

2. 使用极坐标生成器来计算数据点的位置。

var radius = d3.scaleLinear()
   .domain([0, d3.max(data, function(d) { return d.value; })])
   .range([0, radiusMax]);

var angle = d3.scaleLinear()
   .domain([0, data.length])
   .range([0, Math.PI * 2]);

var line = d3.radialLine()
   .radius(function(d) { return radius(d.value); })
   .angle(function(d, i) { return angle(i); });

3. 绘制极坐标图。

svg.append("path")
   .datum(data)
   .attr("class", "line")
   .attr("d", line)
   .attr("fill", "none")
   .attr("stroke", "steelblue")
   .attr("stroke-width", 2);

4. 添加标签。

svg.selectAll(".label")
   .data(data)
   .enter()
   .append("text")
   .attr("class", "label")
   .attr("x", function(d, i) { return radius(d.value) * Math.cos(angle(i)); })
   .attr("y", function(d, i) { return radius(d.value) * Math.sin(angle(i)); })
   .text(function(d) { return d.label; })
   .attr("text-anchor", "middle")
   .attr("fill", "black");

完整的示例代码如下所示：

var data = [
   { label: "A", value: 10 },
   { label: "B", value: 20 },
   { label: "C", value: 15 },
   { label: "D", value: 12 }
];

var width = 500;
var height = 500;
var radiusMax = Math.min(width, height) / 2;

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

var radius = d3.scaleLinear()
   .domain([0, d3.max(data, function(d) { return d.value; })])
   .range([0, radiusMax]);

var angle = d3.scaleLinear()
   .domain([0, data.length])
   .range([0, Math.PI * 2]);

var line = d3.radialLine()
   .radius(function(d) { return radius(d.value); })
   .angle(function(d, i) { return angle(i); });

svg.append("path")
   .datum(data)
   .attr("class", "line")
   .attr("d", line)
   .attr("fill", "none")
   .attr("stroke", "steelblue")
   .attr("stroke-width", 2);

svg.selectAll(".label")
   .data(data)
   .enter()
   .append("text")
   .attr("class", "label")
   .attr("x", function(d, i) { return radius(d.value) * Math.cos(angle(i)); })
   .attr("y", function(d, i) { return radius(d.value) * Math.sin(angle(i)); })
   .text(function(d) { return d.label; })
   .attr("text-anchor", "middle")
   .attr("fill", "black");

这样，你就可以在D3的极坐标图中添加标签了。