如何定位文本标签在一个Sunburst图表与d3.js

我认为这接近你的目标:http://jsfiddle.net/4PS53/3/

需要做的修改如下:

function getAngle(d) {
    // Offset the angle by 90 deg since the '0' degree axis for arc is Y axis, while
    // for text it is the X axis.
    var thetaDeg = (180 / Math.PI * (arc.startAngle()(d) + arc.endAngle()(d)) / 2 - 90);
    // If we are rotating the text by more than 90 deg, then "flip" it.
    // This is why "text-anchor", "middle" is important, otherwise, this "flip" would
    // a little harder.
    return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg;
}
slices.append("text")
    .style("font-size", "10px")
    .attr("x", function(d) { return d[1]; })
     // Rotate around the center of the text, not the bottom left corner
    .attr("text-anchor", "middle")
     // First translate to the desired point and set the rotation
     // Not sure what the intent of using this.parentNode.getBBox().width was here (?)
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")" + "rotate(" + getAngle(d) + ")"; })                                    
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .text(function(d){return d[2]})
    .attr("pointer-events","none");

现在，为了使它与缩放工作，参考点发生变化，我们需要更多的基础设施。

1. 使g.form-container而不仅仅是path.form可见/不可见。这意味着我们不必担心使标签单独消失。(我已经添加了form-container类)

2. 计算新点并计算其centroid和rotation。这有点棘手，但并不太难:

   function change_ref(data_point, reference_point) {
       return [
           get_start_angle(data_point, reference_point),
           get_stop_angle (data_point, reference_point),
           data_point[2],
           get_level      (data_point, reference_point)
       ];
   }
   // And while doing transitioning the `text.label`:
   svg.selectAll('.label')
   .filter(
       function (b)
       {
           return b[0] >= new_ref[0] && b[1] <= new_ref[1] && b[3] >= new_ref[3];
       }
   ).transition().duration(1000)
    .attr("transform", function(b) {
        var b_prime = change_ref(b, d);
        return "translate(" + arc.centroid(b_prime) + ")" + 
               "rotate("    + getAngle(b_prime) +     ")"; 
    })
   

   我已将label类添加到text中。

更新演示: http://jsfiddle.net/4PS53/6/

然而，我认为可能有更好的方式来呈现这些数据，特别是如果你允许缩放和平移:D3在饼图中放置弧形标签，如果有足够的空间

我对musically_ut代码做了一些改进。

现在你可以从一个数据切换到另一个。

                $('#change').click(function () {
                if (animating) {
                    return;
                }
                if (currentSet == 0) {
                    currentSet = 1;
                    svg.selectAll(".form").filter(
                            function (d) {
                                return d[0] >= ref[0] && d[1] <= ref[1] && d[level_index] >= ref[level_index];
                            }
                        )
                         .transition().duration(1000)
                        .attrTween("d", changeDatarebaseTween(0, 1, 2, 3));
                    svg.selectAll('.label').filter(
                            function (d) {
                                return d[0] >= ref[0] && d[1] <= ref[1] && d[level_index] >= ref[level_index];
                            }
                        )
                         .transition().duration(1000)
                         .attr("transform", function (b) {
                             var b_prime = change_ref_CD(b);
                             return "translate(" + arc.centroid(b_prime) + ")" +
                                    "rotate(" + getAngle(b_prime) + ")";
                         })
                }
                else {
                    currentSet = 0;
                    svg.selectAll(".form").filter(
                            function (d) {
                                return d[2] >= ref[2] && d[3] <= ref[3] && d[level_index] >= ref[level_index];
                            }
                        )
                         .transition().duration(1000).attrTween("d", changeDatarebaseTween(2, 3, 0, 1));
                    svg.selectAll('.label').filter(
                            function (d) {
                                return d[2] >= ref[2] && d[3] <= ref[3] && d[level_index] >= ref[level_index];
                            }
                        )
                         .transition().duration(1000)
                         .attr("transform", function (b) {
                             var b_prime = change_ref_CD(b);
                             return "translate(" + arc.centroid(b_prime) + ")" +
                                    "rotate(" + getAngle(b_prime) + ")";
                         })
                }
                setTimeout(function () {
                    animating = false;
                }, 1000);
            });

编辑:http://jsfiddle.net/k1031ogo/3/

(代码可以更简洁，太多的复制/粘贴)