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'
  });   

以下是小提琴的链接：

https://jsfiddle.net/ahc4wdjk/

Answer 1

在D3 transition选择中，起始值是当前属性值。因此，我们开始创建弧后面的文本：

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