指令和 d3，第一个转换被忽略

Question

在一个指令中，我尝试使用 d3 应用转换（到 html 元素，而不是 SVG），但奇怪的是第一次它被忽略了。

d3.selectAll('h1')
.transition()
.duration(2000)
.style('-webkit-transform',function(d,i){
    return "translateX("+(i*30)+"px)"
})

检查此jsbin，当它最初呈现时，单击...并且元素只会跳转（没有过渡），如果在此之后的任何时间单击 - 过渡按预期工作。

我找不到解决方法

Answer 1

d3 需要第一次转换的起点：

template: '<div style="background:red" ng-click="isTrans = !isTrans"><h1 ng-repeat="n in numbers" style="-webkit-transform: translateX(0px)"> {{n}} </h1></div>'

见update。