Question

我试图在指令中包含我的d3代码。

然而，当我的指令在ng-repeat中时，转换不会发生。

这里是问题的JSFiddle：http://jsfiddle.net/hLtweg8L/1/：您可以看到，当您点击按钮时，矩形位置不会平滑变化，并且'append'会被记录到控制台再一次。

我的指示如下：

myMod.directive('chart',function(){
  return {
    restrict:'A',
    scope:{
      data:'=',
    },
      link:function(scope,elem,attrs){
          a=d3.select(elem[0]);
          rects=a.selectAll("rect").data(scope.data,function(d));

          rects.enter().append("rect")
             .attr("x",function(d,i){console.log('append');return i*50+"px"})
             .attr("y",100)
             .attr("width",35)
             .attr("height",function(d){return d.age*10+"px"})
             .attr("fill","blue")

          rects.transition().duration(200)
             .attr("x",function(d,i){console.log('append');return i*50+"px"})
             .attr("y",100)
             .attr("width",35)
             .attr("height",function(d){return d.age*10+"px"})
             .attr("fill","blue")
    }
  }
})

据我了解，问题是当ng-repeat更新时，链接函数内传递的elem不一样，这就是为什么追加被多次调用的原因对于相同的数据。

我的问题是：如何在ng-repeat中使用d3过渡？（更正了Jsfiddle会有很多帮助）。或者为什么不同的电话之间的元素不一样？我可以告诉角度，dom不应该被移除并再次添加吗？

Answer 1

需要做几件事：

如果您不想要ng-repeat来创建新元素，则需要使用track by选项，以便它知道如何识别新项目和更改项目：

<div ng-repeat="set in sets track by set.group">

除非您的指令监视更改，否则D3不会自动看到数据已更改。

  a=d3.select(elem[0]);
  scope.$watch('data', function() {
      updateGraph();
  });

这是另一个小提琴： http://jsfiddle.net/63tze4Lv/1/

在ng-repeat中，d3驱动的指令转换不起作用

1 个答案: