在轉換 D3 之后更改 object 屬性

Question

轉換完成后，我想給 object 一個屬性。 我只是更新圖像 position 如下：

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

完成后，我想給 object 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

您可以告訴javascript等待一段時間並在使用window.setTimeout后運行代碼。 您只需使用相同的毫秒數同步兩個事件。

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

Answer 3

回應@ user1066286（因為我無法發表評論）：你不應該在這里使用setTimout（）！ 從這是不好的做法，你不能保證在超時停止時實際完成過渡。

來自d3 Transition文檔：

轉換具有四階段生命周期：

過渡計划。 過渡開始了。 轉型運行。 轉型結束。

這四個phaze中的每一個都是異步處理的，因此無法知道轉換實際需要多長時間。 它可能比用戶定義的持續時間慢一點，它可能會快一點。

Answer 4

@Felix Klings 的回答似乎已被棄用。 請參閱https://stackoverflow.com/a/10692220/14095529 （下面的塊引用了該答案）。

// d3 v5
d3.select("#myid").transition().style("opacity","0").on("end", myCallback);

// old way
d3.select("#myid").transition().style("opacity","0").each("end", myCallback);