如何在轉換中移動文本標籤

我是D3新手，我試圖擴展http://bl.ocks.org/mbostock/4063423中的sunburst示例，只是爲每個弧添加文本標籤。對於靜態圖表很容易，並且在此代碼中標籤的位置正確，但是當添加轉換時（與示例中的轉換相同），可以調整弧的大小，文本標籤不會移動。如何在轉換中移動文本標籤

<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>

我該如何實現標籤運動，只需要移動相應的弧線？

問候，瓊

來源

2013-02-24 joanba

嘗試幾件事情後，我發現，在功能上的改變是必要的，也更新標籤，只需添加這一呼籲已經解決了這個問題：

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

現在作品。

來源

2013-02-25 07:56:11 joanba

如何在轉換中移動文本標籤

回答

相關問題