javascript - donut 标签的 D3.js 动画

Question

我已经在 d3.js 中有一个圆环图。

标签的动画现在是这样的:

标签起点:标签都在 donut 的中心

终点:他们最终进入三分线外。

现在下面是我正在努力实现的......

我想要实现的目标:

我想改变标签的起点。

我希望标签显示在 donut 的圆弧后面，而不是中心。

终点像现在这样就好了。

有什么办法可以实现吗？

即改变标签的发射点而不是他们应该的中心从弧线后面出现。

这是我要修改的代码:

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

下面是 fiddle 的链接:

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

这是 fiddle :https://jsfiddle.net/gerardofurtado/zrahm2h4/1/