關閉與D3.Transition.Each回調

Question

我想創建一個D3.js動畫執行以下操作：

1. 矩形從0開始寬度，並擴展到右邊

2. 矩形，然後從左邊

3. 重複合同永遠

我一直在使用的實例闡述在這個例子中遞歸立即函數創建一個簡單的動畫：http://bl.ocks.org/mbostock/1125997

function Sweep() { 
    var rect = d3.select(this); 
    (function repeat() { 
     rect = rect.transition() 
     .attr("x", function(){ return rect.attr("width") < width ? 0 : width; }) 
     .attr("width", function() { return rect.attr("width") < width ? width : 0; }) 
     .each("end", function() { 
      d3.select(this).attr("x", 0);    
      repeat(); 
      }); 
    })(); 
} 

遞歸似乎一切正常，然而，要復位爲0 X的代碼行似乎並沒有工作。我懷疑這是一個關閉相關的問題，在「結束」回調內的上下文不是我所期望的。

完整的代碼可以在這裏查看。 http://jsfiddle.net/p3RZ7/

您將看到前兩個迭代有效，但除此之外沒有任何可見的，因爲x屬性未被重置。

Answer 1

你想要做的代碼實際上比你想象的要容易得多。您可以在Sweep功能做的一切，包括x屬性設置爲0：

function Sweep() { 
    d3.select(this).attr("x", 0) 
    .transition().ease("linear").duration(sweepDuration) 
    .attr("x", function(){ return d3.select(this).attr("width") < width ? 0 : width; }) 
    .attr("width", function() { return d3.select(this).attr("width") < width ? width : 0; }) 
    .each("end", Sweep); 
} 

完成演示here。