D3圆半径的弹性缓和过渡导致设置负半径

Question

在d3js中使用ease("elastic", a, p)函数时，我遇到了一个非常奇怪的问题。我正在转换圆的半径，并且我在控制台中遇到大量错误，这大大减慢了我的网页速度。错误表明我设置了一个负半径 - 在一些调试之后（从控制台记录所有内容与之前的代码差异）我发现由elastic缓动引起的。这是我的代码：

function redraw() {
    var day = d3.select('input[name="day"]:checked').node().value;
    var time = d3.select('input[type="range"]').node().value.toString();
    var direction = d3.select('input[name="direction"]:checked').node().value;

    // fix bug in which data for single digit hours is not displayed
    if (time.length == 1) {time = "0" + time;}

    if (circles !== undefined) {
        circles.transition().duration(900).ease('elastic', 1, 0.75).attr({
            fill: function(d) {
                return shadeColor("#ff0000", (-1 * getCircleSize(d.data, day, time, direction)));
            },
            r: function(d) {
                var size = getCircleSize(d.data, day, time, direction);

                if (size <= 0) {
                    return 0;
                } else if (size > 0 && size < 2) {
                    return size + 2;
                } else if (size > 50) {
                    return size*0.1 + 50;
                } else {
                    return size;
                }
            }
        });
    }
}

这是我得到的错误的一个例子：

Error: Invalid negative value for <circle> attribute r="-0.04404809159933931"
(anonymous function)
@ d3.v3.min.js:5l
@ d3.v3.min.js:3Lt
@ d3.v3.min.js:1qt
@ d3.v3.min.js:1

如果我改变了行：

circles.transition().duration(900).ease('elastic', 1, 0.75).attr({...});

为：

circles.transition().duration(900).ease('quad').attr({...});

...它没有在控制台中吐出任何错误。

这里还有截图：

如果你能就如何解决这个问题给我一些指导，那就太好了。提前谢谢！

Answer 1

检查d3.ease()上的规范：

  

  
• 弹性（a，p） - 模拟弹性带;可能略微超过0和1。
  

因为弹性缓和稍微超过了范围[0,1]，所以对于半径，宽度等不能为负的长度没有用。正如您已经注意到的那样，还有其他缓和功能可以保证产生正值仅限值。在easing function上查看此概述，以查找将保持在[0,1]范围内的函数。