전환시 텍스트 레이블을 이동하는 방법

Question

저는 D3을 처음 사용하고 각 호에 텍스트 레이블을 추가하기 만하면 http://bl.ocks.org/mbostock/4063423에 햇살 예제를 확장하려고합니다. 정적 차트에 대해 쉽습니다.이 코드 레이블은 올바르게 배치되었지만, 예를 들어 호보다 크기가 작은 전환을 추가하면 텍스트 레이블이 이동하지 않습니다.

<script type="text/javascript"> 

    function onload() {  
     var container = document.querySelector("#graph"); 
     var width = $(container).width(), 
      height = 700, 
      radius = Math.min(width, height)/2, 
      color = d3.scale.category20c(); 

     var svg = d3.select("#graph").append("svg") 
      .attr("width", width) 
      .attr("height", height) 
      .append("g") 
      .attr("transform", "translate(" + width/2 + "," + height * .52 + ")"); 

     var partition = d3.layout.partition() 
      .sort(null) 
      //.size([2 * Math.PI, radius * radius]) 
      .size([2 * Math.PI, 100000]) 
      // criteri per defecte: Importància 
      .value(function(d) { return d.size; }); 

     var arc = d3.svg.arc() 
      .startAngle(function(d) { return d.x; }) 
      .endAngle(function(d) { return d.x + d.dx; }) 
      .innerRadius(function(d) { return Math.sqrt(d.y); }) 
      .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 

      d3.json("data/CV.json", function(error, root) { 
      var arcs = svg.datum(root).selectAll("path") 
       .data(partition.nodes) 
       .enter().append('svg:g'); 

      var path = arcs.append("path") 
       .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 
       .attr("d", arc) 
       .style("stroke", "#fff") 
       .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
       .style("fill-rule", "evenodd") 
       .each(stash);  

     var label = arcs.append("svg:text") 
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
      .attr("dy", ".35em") 
      .attr("text-anchor", "middle") 
      .attr("class", "label") 
      .attr("style", function(d) { return d.depth ? null : "display: none"; }) // hide inner 
      .text(function(d) { return d.name; }); 

      d3.selectAll("input").on("change", function change() { 
      var value = this.value === "count" 
       ? function() { return 1; } 
       : function(d) { return d.size; }; 

      path 
       .data(partition.value(value).nodes) 
       .transition() 
       .duration(1500) 
       .attrTween("d", arcTween); 

      }); 
     }); 

     // Stash the old values for transition. 
     function stash(d) { 
      d.x0 = d.x; 
      d.dx0 = d.dx; 
     } 

     // Interpolate the arcs in data space. 
     function arcTween(a) { 
      var i = d3.interpolate({x: a.x0, dx: a.dx0}, a); 
      return function(t) { 
      var b = i(t); 
      a.x0 = b.x; 
      a.dx0 = b.dx; 
      return arc(b); 
      }; 
     } 

     d3.select(self.frameElement).style("height", height + "px"); 
    } 

</script> 

어떻게 대응하는 원호로 이동하기 만하면 레이블 이동을 구현할 수 있습니까? 그것을 지금

label 
    .data(partition.value(value).nodes) 
    .transition() 
    .duration(1500) 
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
    }); 

:

감사합니다, 조안

Answer 1

몇 가지 시도 후, 나는 기능에 변화가 바로이 호출이 문제를 해결했다 추가, 또한 라벨을 업데이트 할 필요가 있음을 발견했습니다 공장.