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

我希望有更多经验的人（我已经使用它约2天）将能够轻松指出我做错了什么。我猜这不是一些神秘的错误，而是一些简单的事情，我已经忽略了经验。

Answer 1

我尝试了plunker代码并且它工作了1个圆圈，但是当我将它作为数据绑定示例时，我做了2个不断扩展的事情 - ＆gt;

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

戳一下，这是因为.attr（“r”）作为字符串返回（前一个plunker返回undefined），而“5”刚刚添加到前一个值的末尾。执行var r = +t.attr('r');修复

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

问题

守则

1 个答案: