ドーナツラベルのD3.jsアニメーション

Question

d3.jsに既にドーナツチャートがあります。

ラベルのアニメーションは今、この権利のようないくつかのものです：ラベルの出発点

：ラベルは、すべてのドーナツのポイントを終了

の中心にあります彼らはアークの後ろに行く。今すぐ下記

は私が達成しようとしているものです....

私が達成したいもの：

私は、ラベルの開始点を変更したいです。

の代わりにドーナツの円弧の後ろにのラベルが表示されます。

終了点は今のとおりです。

これを達成する方法はありますか？

つまり、中心からラベルの発光点を変更すると、円の後ろから が表示されます。ここで

は私が修正しようとしているコードです：以下

var text=svg.selectAll('text') 
    .data(pie(dataset.data)) 
    .enter() 
    .append("text") 
    .transition() 
    .duration(1000) 
.attr("transform", function (d) { 
    console.log(d); 
    console.log(arc.centroid(d)); 
    var c = arc.centroid(d), 
      x = c[0], 
      y = c[1], 
      h = Math.sqrt(x*x + y*y); 
    return "translate(" + (x/h * labelr) + ',' + 
      (y/h * labelr) + ")"; 
    }) 
    .attr("dy", ".4em") 
    .attr("text-anchor", "middle") 
    .text(function(d){ 
     return d.data +"%"; 
    }) 
    .style({ 
     fill:'#000', 
     'font-size':'11px' 
    }); 

バイオリンへのリンクされています、開始値は、現在のD3 transitionの選択で

https://jsfiddle.net/ahc4wdjk/

Answer 1

ですアトリビュート値。そこで、我々は、弧の背後にあるテキストの作成を開始：

.attr("x", function(d){ 
    return arc.centroid(d)[0] 
}) 
.attr("y", function(d){ 
    return arc.centroid(d)[1] 
}) 

あなたアークが同時に表示されませんので、私は、ここで問題がありました。その解決策は、テキストに最初に.attr("opacity", 0)を与えて、ちょっと待って（delay(1000)を使用して）テキストを与えていました。

最後にコードを使用しましたが、labelrをlabelr = radius - 160;に変更しました。ここで

はフィドルは次のようになります。このようなhttps://jsfiddle.net/gerardofurtado/zrahm2h4/1/