在过渡 D3 之后更改对象属性答案

【问题标题】：Change object attribute following transition D3在过渡 D3 之后更改对象属性
【发布时间】：2012-06-19 23:14:23
【问题描述】：

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

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')

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

【问题讨论】：

标签： javascript attributes transition d3.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

根据the documentation，可以使用.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');
 });

【讨论】：

和 each 与“开始”相反。这个很方便，谢谢

【解决方案3】：

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

来自 d3 Transition 文档：

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

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

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

【讨论】：