0

ease("elastic", a, p)在 d3js 中使用该函数时，我遇到了一个非常奇怪的问题。我正在转换圆的半径，并且控制台中出现大量错误，这大大减慢了我的网页速度。错误表明我正在设置负半径 - 经过一些调试（从控制台记录所有内容到与以前代码的差异），我发现这是由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({...});

...它不会在控制台中吐出任何错误。

这里还有一个截图： d3-弹性错误

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

4

1 回答 1

3

检查d3.ease()的规范：

  • elastic(a, p) - 模拟松紧带；可能会稍微超出 0 和 1。

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

于 2015-05-12T10:51:03.680 回答