Question

我创建了一个简单的Angular / D3圆环图。

Plunker：http://plnkr.co/edit/NyH1udkjBj3zymhGaThZ?p=preview

但是我希望图表在页面加载时有动画。在那，我的意思是，我希望填充（蓝色区域）过渡。

Somethign类似于：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.使用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＆＃39;运行＆＃39;命令帮助吗？

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

请参阅＆＃39;运行＆＃39;在此页https://docs.angularjs.org/api/ng/type/angular.Module ＆＃39;运行（）＆＃39;一旦AngularJs引导，你就会只给你一次执行某某某个功能。

在负载

2 个答案: