需要对D3馅饼布局添加一行一些帮助标记

Question

这里是图像样本我怎么想都看： http://i.stack.imgur.com/ro2kQ.png

我正在一个饼图，但我想添加一行到无标记>值。 任何帮助，将不胜感激。

http://jsfiddle.net/28zv8n65/

这里是;

arcs.append("svg:text") 
    .attr("transform", function(d) { //set the label's origin to the center of the arc 
    //we have to make sure to set these before calling arc.centroid 
    d.outerRadius = outerRadius + 50; // Set Outer Coordinate 
    d.innerRadius = outerRadius + 45; // Set Inner Coordinate 
    return "translate(" + arc.centroid(d) + ")"; 
    }) 
    .attr("text-anchor", "middle") //center the text on it's origin 
    .style("fill", "Purple") 
    .style("font", "bold 12px Arial") 
    .text(function(d, i) { return dataSet[i].label; }); 

Answer 1

试试这个代码。

var labelr = outerRadius+60; 

//Draw labels 

arcs.append("svg:text") 
    .attr("text-anchor", "middle") //center the text on it's origin 
    .style("fill", "Purple") 
    .style("font", "bold 12px Arial") 
    .text(function(d, i) { return dataSet[i].label; }) 
    .attr("x", function(d) { 
     var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; 
     d.cx = Math.cos(a) * (labelr - 75); 
     return d.x = Math.cos(a) * (labelr - 20); 
    }) 
    .attr("y", function(d) { 
     var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; 
     d.cy = Math.sin(a) * (labelr - 75); 
     return d.y = Math.sin(a) * (labelr - 20); 
    }) 
    .each(function(d) {  
     var bbox = this.getBBox(); 
     d.sx = d.x - bbox.width/2 - 2; 
     d.ox = d.x + bbox.width/2 + 2; 
     d.sy = d.oy = d.y + 5; 
    }); 

//Draw pointer lines 

arcs 
    .append("path") 
    .attr("class", "pointer") 
    .style("fill", "none") 
    .style("stroke", "black") 
    .attr("d", function(d) {  
    if(d.cx > d.ox) { 
     return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy; 
    } else { 
     return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy; 
    } 
    }); 

代码从d3.js pie chart with angled/horizontal labels refered