在 d3 餅圖外添加標簽不起作用

Question

我正在嘗試在http://bl.ocks.org/dbuezas/9306799 上顯示的 d3 餅圖中添加標簽，但它始終顯示切片內的標簽。

    var dataset = ${pieList};

    var width = 700,
            height = 700,
            outerRadius = Math.min(width, height) / 2,
            innerRadius = outerRadius * .999,

            innerRadiusFinal = outerRadius * .5,
            innerRadiusFinal3 = outerRadius * .45,
            color = d3.scale.category20()    
            ;

    var vis = d3.select("#pieChart")
            .append("svg:svg")              
            .data([dataset])                   
            .attr("width", width)           
            .attr("height", height)
            .append("svg:g")                
            .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")    
            ;

    var arc = d3.svg.arc()              
            .outerRadius(outerRadius).innerRadius(innerRadius);


    var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
    var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);

    var pie = d3.layout.pie()          
            .value(function (d) {
                return d.measure;
            });    

    var arcs = vis.selectAll("g.slice")    
            .data(pie)                          
            .enter()                            
            .append("svg:g")               
            .attr("class", "slice")    
            .on("mouseover", mouseover)
            .on("mouseout", mouseout)
            .on("click", up)
            ;

    arcs.append("svg:path")
            .attr("fill", function (d, i) {
                return color(i);
            }) 
            .attr("d", arc)    
            .append("svg:title") 
            .text(function (d) {
                return d.data.category + ": " + formatAsPercentage(d.data.measure);
            });

    d3.selectAll("g.slice").selectAll("path").transition()
            .duration(750)
            .delay(10)
            .attr("d", arcFinal)
            ;


    arcs.filter(function (d) {
        return d.endAngle - d.startAngle > .2;
    })
            .append("svg:text")
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .attr("transform", function (d) {
                return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")";
            })


            .text(function (d) {
                return d.data.category;   
            })
            ;

            .attr("transform", function (d) {
        return "translate(" + arcFinal.centroid(d)
                + ")rotate(" + angle(d)
                + ")translate(" + 700 + ",0)";
    })

    function angle(d) {
        var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
        return a > 90 ? a - 180 : a;
    }



    // Pie chart title          
    vis.append("svg:text")
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .text("Attendance report 2015")
            .attr("class", "title")
            ;

    function mouseover() {
        d3.select(this).select("path").transition()
                .duration(750)
                //.attr("stroke","red")
                //.attr("stroke-width", 1.5)
                .attr("d", arcFinal3)
                ;
    }

    function mouseout() {
        d3.select(this).select("path").transition()
                .duration(750)
                //.attr("stroke","blue")
                //.attr("stroke-width", 1.5)
                .attr("d", arcFinal)
                ;
    }

    function up(d, i) {

        /* update bar chart when user selects piece of the pie chart */
        //updateBarChart(dataset[i].category);
        updateBarChart(d.data.category, color(i));
        updateLineChart(d.data.category, color(i));

    }

我想在餅圖切片之外顯示標簽，但它始終顯示在切片內部。

Answer 1

一種選擇是通過餅圖的半徑向外翻譯文本，這可能是旋轉后最容易做到的。 所以，像這樣：

.attr("transform", function (d) {
    return "translate(" + arcFinal.centroid(d) 
    + ")rotate(" + angle(d) 
    + ")translate(" + radius + ",0)";
})

其中， radius是餅圖的半徑。 有時您可能想要進一步平移幾個像素，以便在圖表和標簽之間留出邊距。

這當然不是唯一的答案，但這里還有一些需要注意的問題：

1. 旋轉您的文本可能會導致它在圖表的一側倒置，這不是很容易閱讀。
2. 修復旋轉問題后，您可能會發現標簽的textanchor都會導致長標簽越過圖形。
3. 如果你的餡餅片很薄，你最終可能會在另一個上面寫標簽。