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

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") 
    } 
    } 
}) 

据我的理解，问题是，链接函数内部通过elem是不是当NG重复得到更新是相同的，这就是为什么append被相同的数据不止一次地调用。

我的问题是：如何在ng-repeat中使用d3转换？ （更正Jsfiddle会有很大帮助）。或者为什么不同呼叫之间的elem不一样？我可以告诉角度不应该删除和再次添加的dom吗？

Answer 1

一对夫妇需要的东西：

• 如果你不想NG-重复创建一个新的元素，你需要这样它才能知道如何识别新主场迎战改为使用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/