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/