javascript - 在过渡 D3 之后更改对象属性

Question

一旦转换完成，我想给一个对象一个属性。我只是按如下方式更新图像位置：

tmp.transition().duration(1000)
                    .attr("transform", function(d) {return 'translate(' + 
                    coordinates[d].x +',' + 
                    coordinates[d].y + ')'})

一旦完成，我想给对象 tmp 一个属性“moved”，其值为“no”。我试过：

tmp.transition().duration(1000)
     .attr("transform", function(d) {return 'translate(' + 
            coordinates[d].x +',' + 
            coordinates[d].y + ')'}).end('moved', 'no')

但没有成功。有小费吗？谢谢，

Answer 1

根据文档，您可以使用.each：

tmp.transition().duration(1000)
 .attr("transform", function(d) {return 'translate(' + 
        coordinates[d].x +',' + 
        coordinates[d].y + ')'}
 ).each('end', function() {
     d3.select(this).attr('moved', 'no');
     // or maybe also this.setAttribute('moved', 'no');
 });

Answer 2

使用 window.setTimeout 后，您可以告诉 javascript 等待一段时间并运行代码。您只需使用相同的毫秒数来同步这两个事件。

window.setTimeout(function(){
    //Your fake "callback" code here
}, 1000);

Answer 3

回应@user1066286（因为我不能发表评论）：你不应该在这里使用 setTimout() ！除了这是不好的做法外，您不能保证在超时停止时转换实际上会完成。

来自 d3 Transition 文档：

转换有四个阶段的生命周期：

过渡已安排。过渡开始。过渡运行。过渡结束。

这四个阶段中的每一个都是异步处理的，因此无法知道转换实际需要多长时间。它可能比用户定义的持续时间慢一点，也可能快一点。