我如何外化我的d3 v4餅圖標籤？

Question

我正在使用d3 v4。我想將表格從我的餅圖中移出，並讓它們指向餅圖（因爲對於小的楔形，不可能讀取標籤）。我認爲這將增加外部標籤

// Now we'll draw our label lines, etc. 
enteringLabels = labels.selectAll(".label").data(data).enter(); 
labelGroups = enteringLabels.append("g").attr("class", "label"); 
labelGroups.append("circle").attr({ 
    x: 0, 
    y: 0, 
    r: 2, 
    fill: "#000", 
    transform: function (d, i) { 
     centroid = pied_arc.centroid(d); 
     return "translate(" + pied_arc.centroid(d) + ")"; 
    }, 
     'class': "label-circle" 
}); 

，但標籤不出現外部 - https://jsfiddle.net/2df75xj0/1/。我還需要做些什麼來外化標籤？

Answer 1

var svg = d3.select("svg"), 
 
    width = +500, 
 
    height = +200, 
 
    radius = Math.min(width, height)/2, 
 
    g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
var labels = d3.select("#labels"); 
 

 
var color = d3.scaleOrdinal(["#98abc5", 
 
\t \t \t  "#8a89a6", 
 
\t \t \t  "#7b6888", 
 
\t \t \t  "#6b486b", 
 
\t \t \t  "#a05d56", 
 
\t \t \t  "#d0743c", 
 
\t \t \t  "#ff8c00", 
 
\t \t \t  "#e34d01", 
 
\t \t \t  "#ccff05", 
 
\t \t \t  "#3e7eca", 
 
\t \t \t  "#aa0092", 
 
\t \t \t  "#b32e4f"]); 
 

 
var pie = d3.pie() 
 
    .sort(null) 
 
    .value(function(d) { return d.market_cap; }); 
 

 
var path = d3.arc() 
 
    .outerRadius(radius - 10) 
 
    .innerRadius(0); 
 

 
var outerArc = d3.arc() 
 
\t  .innerRadius(radius * 0.9) 
 
\t  .outerRadius(radius * 0.9); 
 
    
 
     
 
var label = d3.arc() 
 
    .outerRadius(radius - 40) 
 
    .innerRadius(radius - 40); 
 

 
var csvData = "currency,market_cap\n"; 
 
csvData += "Ethereum,28479743440\n"; 
 
csvData += "Ripple,8082383399\n"; 
 
csvData += "Bitcoin Cash,8767760760\n"; 
 
csvData += "Litecoin,3642098421\n"; 
 
csvData += "NEM,2514744000\n"; 
 
csvData += "Dash,2363329943\n"; 
 
csvData += "IOTA,1706859515\n"; 
 
csvData += "Ethereum Classic,1539824432\n"; 
 
csvData += "NEO,1138990000\n"; 
 
csvData += "Monero,1761024916\n"; 
 
csvData += "Stratis,569824176\n"; 
 
csvData += "Bitcoin,70807286162\n"; 
 
var data = d3.csvParse(csvData); 
 
data.forEach(function(d) { 
 
    d.market_cap = +d.market_cap; 
 
    return d; 
 
}); 
 

 
    var arc = g.selectAll(".arc") 
 
    .data(pie(data)) 
 
    .enter().append("g") 
 
     .attr("class", "arc"); 
 

 
     
 
     
 
    arc.append("path") 
 
     .attr("d", path) 
 
     .attr("fill", function(d) { return color(d.data.currency); }); 
 

 

 

 
// Now we'll draw our label lines, etc. 
 

 
    
 
//-------------------------------------------- 
 

 
    arc.append("text") 
 
     
 
     .attr("transform", function(d,i){ 
 
     var pos = outerArc.centroid(d); 
 
     pos[0] = radius * (midAngle(d) < Math.PI ? 1.1 : -1.1); 
 
     
 
    
 
    var percent = (d.endAngle - d.startAngle)/(2*Math.PI)*100 
 
     if(percent<3){ 
 
     //console.log(percent) 
 
     pos[1] += i*15 
 
     } 
 
     return "translate("+ pos +")"; 
 
     }) 
 
     .text(function(d) { return d.data.currency; }) 
 
     .attr("fill", function(d,i) { return color(i); }) 
 
     .attr("text-anchor", 'left') 
 
     .attr("dx", function(d){ 
 
     var ac = midAngle(d) < Math.PI ? 0:-50 
 
       return ac 
 
     }) 
 
     .attr("dy", 5) 
 
     
 
     
 
    function midAngle(d) { 
 
     return d.startAngle + (d.endAngle - d.startAngle)/2; 
 
    } 
 

 
    var polyline = g.selectAll("polyline") 
 
     .data(pie(data), function(d) { 
 
     return d.data.currency; 
 
     }) 
 
     .enter() 
 
     .append("polyline") 
 
     .attr("points", function(d,i) { 
 
     var pos = outerArc.centroid(d); 
 
      pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1); 
 
     var o= outerArc.centroid(d) 
 
var percent = (d.endAngle -d.startAngle)/(2*Math.PI)*100 
 
     if(percent<3){ 
 
     //console.log(percent) 
 
     o[1] 
 
     pos[1] += i*15 
 
     } 
 
     //return [label.centroid(d),[o[0],0[1]] , pos]; 
 
     return [label.centroid(d),[o[0],pos[1]] , pos]; 
 
     }) 
 
     .style("fill", "none") 
 
     //.attr('stroke','grey') 
 
     .attr("stroke", function(d,i) { return color(i); }) 
 
     .style("stroke-width", "1px");

<!DOCTYPE html> 
 
<html> 
 

 

 
<head> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> 
 

 
</head> 
 

 
<svg width="700" height="400"> 
 
\t <g id="labels" /> 
 
</svg> 
 

 
</html>