Question

这应该是直截了当的：我只想在用户点击按钮时开始运行D3过渡。

但是，D3 end事件似乎没有在我的转换中正确触发：我已经要求转换到rotate(120)，但end事件似乎正在触发当rotate属性仅为45时。

这是我的代码：

var angle = 0;
// handle click event
d3.selectAll('.mycolour').on('click', function() { 

d3.select("#loadingicon").remove(); 

// redraw the icon (excluded here for brevity)...
// setting the transform attribute to 0 explicitly.. 
group2.attr("transform", "rotate(0,0,0)");

// and start it turning:
angle = 0;
function rotateLoadingIcon() {
  angle = angle%360;
  angle += 120;
  console.log('rotateLoadingIcon', angle, group2.attr("transform"));
  d3.select(".icon").transition().ease("linear")
   .duration(4000)
   .attr("transform", "rotate(" + angle + ",0,0)")
   .each("end", function() { 
     angle += 120;
     console.log('innerRotateLoadingIcon', angle, group2.attr("transform"));    
     group2.transition().ease("linear")
       .duration(4000)
       .attr("transform", "rotate(" + angle + ",0,0)")
       .each("end", function() {            
         rotateLoadingIcon();
     });
   });
 }

 console.log('about to start icon loading');
 rotateLoadingIcon();

});

第一次绘制图标时它会起作用：

 rotateLoadingIcon 120 rotate(0,0,0)
 innerRotateLoadingIcon 240 rotate(119.99999999999999)

但是在第二次或后续点击之后，我看到它产生如下控制台输出：

about to start icon loading
rotateLoadingIcon 120 rotate(0,0,0)
innerRotateLoadingIcon 240 rotate(45.14999999999999)

在实践中，这意味着旋转方向改变：（

当innerRotateLoadingIcon属性仅设置为rotate时，为什么45.1...已启动？肯定给出了代码，它应该在rotate到达120之前开始 - 就像第一次运行代码一样。

我想知道我设置JavaScript的方式是否意味着两个不同版本的rotateLoadingIcon可以同时运行。这是可能的，如果可以，我可以解决吗？

更新：这是一个演示问题的JSFiddle，虽然我现在正在尝试setInterval而不是end - 点击两次，你会看到轮换方向，我无法弄清楚为什么：http://jsfiddle.net/QtBvJ/

Answer 1

在jsfiddle的版本中，您只需要正确清除超时以使其正常工作。函数setTimeout返回您需要传递给window.clearTimeout的引用，即

var t = null;
...
window.clearTimeout(t);
...
t = setTimeout(...);

工作小提琴here。

D3转换结束事件未正确触发？

1 个答案: