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是饼图的半径。有时您可能希望进一步转换几个像素，以便在图表和标签之间留有余量。

这当然不是唯一的答案，但这里还有一些需要注意的问题：

旋转文字最终可能会在图表的一侧倒置，这不是很易读。
解决轮换问题后，您可能会发现标签的textanchor会导致长标签覆盖图表。
如果您的饼图很薄，您最终可能会将标签彼此叠加。

在d3饼图外添加标签不起作用

1 个答案: