javascript - Update position/transition from last value (guage chart / d3.js) -


i'm trying repurpose guage chart found here. have needle moving on submit, resets 0 before updating new position, i'd rather adjust position directly.

when trying think of way it, figured need modifiy snippet of code handles reset;

needle.prototype.moveto = function(perc) {         var self,             oldvalue = this.perc || 0;          this.perc = perc;         self = this;          // reset pointer position         this.el.transition().delay(100).ease('quad').duration(200).select('.needle').tween('reset-progress', function() {             return function(percentofpercent) {                 var progress = (1 - percentofpercent) * oldvalue;                  repaintgauge(progress);                 return d3.select(this).attr('d', recalcpointerpos.call(self, progress));             };         });          this.el.transition().delay(300).ease('bounce').duration(1500).select('.needle').tween('progress', function() {             return function(percentofpercent) {                 var progress = percentofpercent * perc;                  repaintgauge(progress);                 return d3.select(this).attr('d', recalcpointerpos.call(self, progress));             };         });      };      return needle;  })  (); 

so think, going have find way of remember old value before updating instead of resetting 0, or try remove reset function completely?

but i'm not sure how can achieve that.

here update function;

  function updateneedle() {         var value = 90;         var percentvalue = value / gaugemaxvalue;         percent = percentvalue;         needle.moveto(percent);     } 

i have made plnk, , tried strip out not relevant question reduce code, click submit update position , question make sense.

https://plnkr.co/edit/ntlpgoef5j1xrfgtjewr?p=preview

i think might bit hacky, i'm hoping can anyway!

thanks

i changed moveto function. using progress starting 0. so, change this:

var progress = oldvalue + (percentofpercent * (perc - oldvalue)); 

here plunker: https://plnkr.co/edit/rcnnplx0un7lzww1ydwu?p=preview

i made other plunker setting value random number every time user clicks "submit", using var value = math.random()*100. believe it's working way want, check it: https://plnkr.co/edit/xj2sgbidjnpn5r9cka59?p=preview


Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -