javascript - 为什么这个 D3 闭包没有返回正确的属性

Question

我有以下代码，它是在 D3 中创建简单散点图的文件的一部分。这应该是非常基础的，因为我刚刚学习图书馆。下面我有函数 breathAnimate ，它应该将圆的半径向上或向下调整 5 个像素。正如您在代码中看到的，它会在元素上查找 smaller 属性。如果该元素存在(并且值为 1)，则圆的半径将减少 5。

然后添加 smaller 属性，以便下次循环时，将运行 if/else 条件的另一端。条件的 else 部分将半径增加 5 并删除 smaller 属性。

然后该函数会调用自身，以便动画连续运行。这个想法是让圆的半径连续上下移动 5 个像素。

问题

函数中的某些内容每次都引用相同的元素，而不是更改 t 和/或 r 变量来引用当前循环中运行的圆元素。因此，圆圈不会变得越来越小，而是越来越大。

代码

// define the animation
var breathAnimate = function(d){
    var t = d3.select(this);
    var r = t.attr('r');

    t.transition()
      .attr('r',function(){
        if( d3.select(this).attr('smaller') == null) {
            t.attr('smaller','1');
            return r + 5;
        } else {
            t.attr('smaller',null);
            return r - 5;
        }
      })
      .each('end',breathAnimate)
    ;
}

// start things off
d3.selectAll('circle')
    .transition()
    .attr('r', function(d){return d})
    .each('end',breathAnimate)
;

我希望对 D3 有更多经验的人(我已经使用了大约 2 天)能够轻松指出我做错的地方。我猜这不是什么神秘的错误，而是一些我因缺乏经验而忽略的简单问题。

Answer 1

我尝试了 plunker 代码，它适用于 1 个圆圈，但当我将其设为数据绑定(bind)示例时，它会不断扩展为 2 个圆圈 -->

http://plnkr.co/edit/ep8MXrPF6Bh3xMMhXBJk?p=preview

仔细想想，这是因为 .attr("r") 作为字符串返回(前一个 plunker 返回未定义)，而“5”只是添加到前一个值的末尾。执行 var r = +t.attr('r'); 修复它