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: d3-elastic-bug

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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -