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
Post a Comment