d3のグラフタイトルをどのようにアニメーション化しますか？

Question

私はangular-nvd3を使って円グラフを作成しようとしています。charは動作し、アニメーション化されますが、「タイトル」の割合をアニメーション化したいと思います。したがって、文字がアニメーション化されると、パーセンテージが上がります。助言がありますか？

$timeout(function(){  
    ctrl.data[0].y = $scope.goal.part; //some number greater than 0 
},500) 

ctrl.data = [{ 
key: "Steps", 
y: 0, 
color: ctrl.colors.color2 
},{ 
key: "Left to goal", 
y: $scope.goal.whole, 
color: ctrl.colors.color 
}]; 

ctrl.options = { 
chart: { 
    type: 'pieChart', 
    height: 325, 
    x: function(d){return d.key;}, 
    y: function(d){return d.y;}, 
    showLabels: false, 
    duration: 1200, 
    labelThreshold: 0.01, 
    labelSunbeamLayout: true, 
    width: 325, 
    title: d3.format('%')(ctrl.data[0].y/ctrl.data[1].y), 
    donut: true, 
    donutRatio: 0.70, 
    tooltips: false, 
    showLegend: false 
} 
}; 




    <nvd3 options="ctrl.options" data="ctrl.data"></nvd3> 

Answer 1

タイトルをチャートから移動し、チャートと同じレベルのタイトルオブジェクトを作成する必要があります。

このようにしてみてください。それが今であるよう

ctrl.options = { 
    chart: { 
    type: 'pieChart', 
    height: 325, 
    x: function(d){return d.key;}, 
    y: function(d){return d.y;}, 
    showLabels: false, 
    duration: 1200, 
    labelThreshold: 0.01, 
    labelSunbeamLayout: true, 
    width: 325, 
    donut: true, 
    donutRatio: 0.70, 
    tooltips: false, 
    showLegend: false 
    }, 
    title :{ 
    enable: true, 
    text: d3.format('%')(ctrl.data[0].y/ctrl.data[1].y), 
    } 
}; 

Described here in the docs Wrapper section