0

这应该很简单：我只想在用户单击按钮时开始运行 D3 转换。

但是，D3end事件似乎没有在我的转换中正确触发：我已经要求转换为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可以同时运行两个不同版本的 JavaScript。这可能吗，如果可以，我可以修复它吗？

更新：这是一个演示问题的 JSFiddle，虽然我现在尝试setInterval而不是end- 单击两次，你会看到旋转改变方向，我不知道为什么：http: //jsfiddle.net/QtBvJ/

4

1 回答 1

0

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

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

在这里工作小提琴。

于 2013-06-18T19:33:04.403 回答