我想將我的d3代碼包含在指令中。d3驅動的指令轉換在ng-repeat內部不起作用
但是,當我的指令在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嗎?
偉大的答案。謝謝 – edi9999 2014-09-06 17:23:44