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() 上的规范：

elastic(a, p) - simulates an elastic band; may extend slightly beyond 0 and 1.

因为弹性缓动超出范围 [0,1] 一点，所以对于不能为负的长度（如半径、宽度等）没有用。正如您已经注意到的，还有其他缓动函数可以保证只产生正值。查看 easing function 上的概述，找到一个将保持在 [0,1] 范围内的函数。

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

D3 Elastic easing transition of circle radius causes negative radius to be set

javascript

easing-functions

easing

d3.js

console.log