加载时动画角度d3的甜甜圈

Question

我创建了一个简单的Angular/D3甜甜圈图。

砰砰作响:http://plnkr.co/edit/NyH1udkjBj3zymhGaThZ?p=preview

然而，我希望图表有一个动画页面加载。在这里，我的意思是，我希望填充(蓝色区域)过渡到。

类似于:http://codepen.io/tpalmer/pen/jqlFG/

HTML:

<div ng-app="app" ng-controller="Ctrl">
    <d3-donut radius="radius" percent="percent" text="text"></d3-donut>
div>

JS:

var app = angular.module('app', []);
app.directive('d3Donut', function() {
  return {
    restrict: 'E',
    scope: {
      radius: '=',
      percent: '=',
      text: '=',
    },
    link: function(scope, element, attrs) {
      var radius = scope.radius;
      var percent = scope.percent;
      var text = scope.text;
      var svg = d3.select(element[0])
        .append('svg')
        .style('width', radius / 2 + 'px')
        .style('height', radius / 2 + 'px');
      var donutScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);
      var color = "#5599aa";
      var data = [
        [0, 100, "#e2e2e2"],
        [0, percent, color]
      ];
      var arc = d3.svg.arc()
        .innerRadius(radius / 6)
        .outerRadius(radius / 4)
        .startAngle(function(d) {
          return donutScale(d[0]);
        })
        .endAngle(function(d) {
          return donutScale(d[1]);
        });
      svg.selectAll("path")
        .data(data)
        .enter()
        .append("path")
        .attr("d", arc)
        .style("fill", function(d) {
          return d[2];
        })
        .attr("transform", "translate(" + radius / 4 + "," + radius / 4 + ")");
      svg.append("text")
        .attr("x", radius / 4)
        .attr("y", radius / 4)
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .attr("font-size", "12px")
        .style("fill", "#333")
        .attr("text-anchor", "middle")
        .text(text);
    }
  };
});
function Ctrl($scope) {
  $scope.radius = 200;
  $scope.percent = 50;
  $scope.text = "40%";
}

Answer 1

我将您的代码与您引用的代码结合起来作为示例。这是一个工作的PLUNK。

有两件事值得注意1. using attrTween:

.attrTween("d", function (a) {
    var i  = d3.interpolate(this._current, a);
    var i2 = d3.interpolate(progress, percent)
    this._current = i(0);
    console.log(this._current);
    return function(t) {
        text.text( format(i2(t) / 100) );
        return arc(i(t));
    };
});

2。更新数据:

data = [
    [0,100,"#e2e2e2"],
    [0,percent,color]
];

我做了一些其他不太重要的更改，比如更习惯地使用控制器片段，等等，但以上是最重要的。

Answer 2

Angular的'run'命令在这里有帮助吗?

angular.module('app', []).run(myfunction($rootScope))

参见本页https://docs.angularjs.org/api/ng/type/angular.Module中的"运行"'run()'会让你在AngularJs启动后只执行一次某某函数。