求助：如何为D3.js环形图添加角度标签

没问题！我来帮你实现环形图的角度标签功能。咱们可以通过计算每个圆弧的中间角度，来定位标签并调整旋转方向，让标签完美贴合圆弧的角度。

修改后的完整代码 #

下面是调整好的可运行代码，我主要修改了标签部分的逻辑，同时保留了你原来的圆弧样式：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font: 10px sans-serif;
        }
        .arc path {
            stroke: #fff;
        }
        text {
            font-size: 12px;
            fill: #333;
        }
    </style>
</head>
<body>
    <div id="donut"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.0/d3.min.js"></script>
    <script>
        var width = 300, height = 300, radius = Math.min(width, height) / 2;
        var color = d3.scale.ordinal()
          .range(["#6fc9e1", "#00627d", "#179bbf"]);
        
        // 保留你原来的圆弧定义
        var biggestarc = d3.svg.arc()
          .outerRadius(radius - 100)
          .innerRadius(radius - 60);
        var bigarc = d3.svg.arc()
          .outerRadius(radius - 100)
          .innerRadius(radius - 50);
        var smallarc = d3.svg.arc()
          .outerRadius(radius - 100)
          .innerRadius(radius - 40);
        
        var pie = d3.layout.pie()
          .sort(null)
          .value(function (d) { return d.percent; });
        
        var svg = d3.select("#donut").append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        
        data = [{ "label": "Biggest", "percent": 33 }, { "label": "Big", "percent": 17 }, { "label": "Small", "percent": 50 }]
        
        var g = svg.selectAll(".arc")
          .data(pie(data))
          .enter().append("g")
          .attr("class", "arc");
        
        // 绘制圆弧（保留你的原有逻辑）
        g.append("path")
          .attr("d", function (d) {
            if (d.data.label == "Biggest") {
              return biggestarc(d);
            } else if (d.data.label == "Big") {
              return bigarc(d);
            } else {
              return smallarc(d);
            }
          })
          .style("fill", function (d) { return color(d.data.label); });
        
        // 添加角度标签的核心逻辑
        g.append("text")
          .attr("transform", function(d) {
            // 先获取当前弧的中间角度（弧度转角度）
            var midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
            // 计算标签的位置：在弧的外侧，比outerRadius远20px的位置
            var labelRadius = radius - 30; // 根据你的圆弧大小调整这个值
            var x = Math.cos(midAngle) * labelRadius;
            var y = Math.sin(midAngle) * labelRadius;
            // 同时设置旋转角度，让文字和圆弧角度匹配
            var rotateAngle = (midAngle * 180 / Math.PI);
            // 处理角度大于180度时文字倒置的问题，翻转180度让文字正立
            if (midAngle > Math.PI) rotateAngle += 180;
            return "translate(" + x + "," + y + ") rotate(" + rotateAngle + ")";
          })
          .attr("text-anchor", "middle")
          .text(function(d) { 
            // 计算并显示角度值（百分比转角度：percent * 3.6）
            var angle = Math.round(d.data.percent * 3.6);
            return angle + "°"; 
          });
    </script>
</body>
</html>

关键修改说明 #

• 角度计算：通过d.startAngle和d.endAngle计算圆弧的中间角度，把弧度转换成角度用于旋转标签。
• 标签定位：用三角函数计算标签在圆弧外侧的位置，你可以通过调整labelRadius的值来控制标签离圆弧的距离。
• 文字方向修正：当中间角度大于π（180度）时，把文字旋转180度，避免文字倒置，保证可读性。
• 角度值转换：把百分比转换成对应的角度（因为一圈是360度，所以百分比乘以3.6就是角度值）。

你可以直接运行这段代码，就能看到每个圆弧外侧显示对应的角度标签啦！

内容的提问来源于stack exchange，提问作者iLaYa ツ