Javascript D3进度条动画在Angular指令中不起作用

我无法在AngularJS指令中设置进度条的动画。我至少能够让它显示我想要的值，但我不能让它从0变为任意的进度值。我的代码中是否有任何明显的错误会导致动画失败？我不明白D3中的动画是如何工作的。另外一个注意事项是，我正在编码的页面上会有几个进度条

myApp.directive('progressItem', function($window){
  return{
  scope: '=item',
  restrict: 'A',
  link: function(scope, element){

  var d3 = $window.d3;

  var width = 120,
    height = 120,
    twoPi = 2 * Math.PI,
    progress = parseFloat(scope.item.completed / scope.item.goals),
    total = 100,
    formatPercent = d3.format(".0%");

  var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(40)
    .outerRadius(50)
    ;

  if(scope.item.value != "add") {

    var svg = d3.select(element[0]).append("svg")
      .attr("width", width)
      .attr("height", height)

      .attr('fill', '#52AD52')
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var meter = svg.append("g")
      .attr("class", "progress-meter");

    meter.append("path")
      .attr("class", "background")
      .attr("d", arc.endAngle(twoPi));

    var foreground = meter.append("path")
      .attr("class", "foreground")
      .attr("d", arc.endAngle(twoPi * progress));

    var text = meter.append("text")
      .attr("text-anchor", "middle")
      .text(formatPercent(0));

    var i = d3.interpolate(0, progress);

    d3.transition().duration(1000).tween("progress", function () {
      return function (t) {
        progress = i(t);
        foreground.attr("d", arc.endAngle(twoPi * progress));
        text.text(formatPercent(progress));
      };
    });
  }
  else{
    element.append('<img class="add" src="../images/add-user.png" />')
  }

}
};
});

myApp.directive（'progressItem'，函数（$window）{
返回{
作用域：'=项'，
限制：“A”，
链接：功能（范围、元素）{
变量d3=$window.d3；
可变宽度=120，
高度=120，
twoPi=2*Math.PI，
progress=parseFloat（scope.item.completed/scope.item.goals），
总数=100，
formatPercent=d3.格式（“.0%”）；
var arc=d3.svg.arc（）
.startAngle（0）
.内半径（40）
.外层（50）
;
如果（scope.item.value！=“添加”）{
var svg=d3.select（元素[0]）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（'fill'，'#52AD52'）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var meter=svg.append（“g”）
.attr（“类别”、“进度表”）；
附加（“路径”）
.attr（“类别”、“背景”）
.attr（“d”，弧端角（twoPi））；
变量前景=米。追加（“路径”）
.attr（“类”、“前景”）
.attr（“d”，弧端角（twoPi*进度））；
变量文本=米。追加（“文本”）
.attr（“文本锚定”、“中间”）
.文本（格式百分比（0））；
var i=d3.插值（0，进度）；
d3.transition（）.duration（1000）.tween（“进度”，函数）（）{
返回函数（t）{
进度=i（t）；
前台属性（“d”，弧端角（twoPi*进度））；
text.text（格式百分比（进度））；
};
});
}
否则{
元素。追加（“”）
}
}
};
});

您需要将链接器函数包装在scope.$watch方法中，以便指令可以侦听“item”上的更改，并相应地应用d3更改。这个问题是关于它的。我将链接器包装在作用域中。$watch但不幸的是仍然无法使其工作。你能创建一个JSFIDLE代码吗？是的，我这里有一个，jsfiddle.net/e28mbna2/7位很尴尬，但我无法让模块注册，但演示我尝试执行的操作的代码就在这里。观察ng repeat中的指令中的变量范围更改“item”并不是直接的。相反，您可以创建一个指令，在指令模板中使用ng repeat在timeline.items上创建进度条动画。像这样的