0

ease("elastic", a, p)d3js で関数を使用しているときに、非常に奇妙な問題が発生します。円の半径を移行していますが、コンソールに大量のエラーが表示され、Web ページの速度が大幅に低下しています。エラーは、私が負の半径を設定していることを示しています — いくつかのデバッグの後 (すべてをコンソールに記録してから前のコードとの差分まで)、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 に答える