Question

我正在尝试创建执行以下操作的D3.js动画：

矩形从0宽度开始，向右展开
然后矩形从左侧收缩
永远重复

我使用递归的立即函数创建了一个简单的动画，如下例所示：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();
            });
    })();
}

递归似乎工作正常，但是将x重置为0的代码行似乎不起作用。我怀疑这是一个与闭包相关的问题，其中＆＃34; end＆＃34;回调不是我所期望的。

可在此处查看完整代码。 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。

用D3.Transition.Each回调关闭

1 个答案: