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

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

我的问题是:如何在 ng-repeat 中使用 d3 转换？ (纠正 Jsfiddle 会有很大帮助)。或者为什么不同调用之间的 elem 不一样？我可以告诉 Angular 不应该删除并再次添加 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();
    });
  

这是一个替代的 fiddle : http://jsfiddle.net/63tze4Lv/1/