javascript - D3 Elastic easing transition of circle radius causes negative radius to be set -
i have weird problem whilst using ease("elastic", a, p)
function in d3js. transitioning radius of circles , i'm getting flood of errors in console, slowing down webpage. errors state i'm setting negative radius — after debugging (from console logging diffs previous code) found out that's caused elastic
easing. here's code:
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 data single digit hours 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; } } }); } }
and here example of error i'm getting:
error: invalid negative value <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
if change line:
circles.transition().duration(900).ease('elastic', 1, 0.75).attr({...});
to:
circles.transition().duration(900).ease('quad').attr({...});
...it doesn't spit out errors in console.
here's screenshot well:
it great if can give me guidance on how solve problem. in advance!
check spec on d3.ease():
- elastic(a, p) - simulates elastic band; may extend beyond 0 , 1.
because elastic easing overshoots range [0,1] little, not useful lengths must not negative radius, width etc. noticed there other easing functions guaranteed yield positive values only. have @ overview on easing function find function stay within range of [0,1].
Comments
Post a Comment