D3 pie (도넛 형) 각 아크 바깥의 차트 레이블

Question

D3을 처음 사용하고 도넛 차트를 얻었지만 각 호 바깥에 호 라벨을 붙일 수는 없습니다.

보라색 라벨을 http://bl.ocks.org/Guerino1/2295263에 넣고 싶습니다.하지만 도넛 차트로 사용할 수 없습니다.

각 호의 레이블을 추가하는 데 다음 코드를 사용하고 있지만 arc.centroid가 예상대로 작동하지 않는 것 같습니다. 정말 사전에 감사

:

 var arcs = vis.selectAll("g.slice") 
    arcs.append("svg:text") 
     .attr("transform", function(d, i) { //set the label's origin to the center of the arc 
     d.outerRadius = svgOuterRadius + 40; // Set Outer Coordinate 
     d.innerRadius = svgOuterRadius + 35; // 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 14px Arial") 
     .text(function(d, i) { return 'label'+i; }); //get the label from our original 

Here 내 JSfiddle입니다.

Answer 1

기본 문제는 호 path 세그먼트가 번역되어 있고 라벨을 추가 할 때 해당 번역을 고려하지 않는다는 것입니다. 연결 한 예를 보면 path 세그먼트가 번역없이 추가된다는 것을 알 수 있습니다. 즉, text 요소를 추가 오프셋없이 추가 할 수 있습니다.

를 해결하려면 단순히 계정에의 오프셋 (offset) 걸릴 :

arcs.append("svg:text") 
     .attr("transform", function(d, i) { //set the label's origin to the center of the arc 
      var c = arc.centroid(d); 
     return "translate(" + (svgWidth/2 + c[0]) + "," + (svgHeight/2 + c[1]) + ")"; 
}) 
// etc 

전체 예 here합니다.