从上一个值更新位置/转换(量表/d3.js) [英] Update position/transition from last value (guage chart / d3.js)

问题描述

我正在尝试重新使用此处找到的仪表图.目前，我的针头正在继续提交，但是在更新到新位置之前，它重置为0，我希望它直接调整位置.

I'm trying to repurpose a guage chart I found here. Currently I have the needle moving on submit, however it resets to 0 before updating to the new position, I'd rather it just adjust the position directly.

当试图考虑一种方法时，我认为我需要修改此代码段以处理重置；

When trying to think of a way to do it, I figured that I would need to modifiy this snippet of code which handles the 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;

})

();

所以我想，我将不得不在更新之前找到一种记住旧值的方法，而不是重置为0，或者只是尝试完全删除重置功能?

So I think, I am going to have to find a way of remember the old value before updating instead of resetting to 0, or just try remove the reset function completely?

但是我不太确定如何实现这一目标.

But I'm not really sure how I can achieve that.

这是更新功能；

  function updateNeedle() {
        var value = 90;
        var percentValue = value / gaugeMaxValue;
        percent = percentValue;
        needle.moveTo(percent);
    }

我已经做出承诺，并尝试剔除与该问题无关的所有内容以减少代码，只需单击提交以更新该职位，并希望该问题有意义.

I have made a plnk, and tried to strip out everything not relevant to the question to reduce the code, just click the submit to update the position and hopefully the question will make sense.

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

我认为这一切可能有点荒谬，但我希望无论如何都能提供帮助！

I think this all might be a bit hacky, but i'm hoping someone can help anyway!

谢谢

推荐答案

我更改了您的moveTo函数.它使用的是从0开始的progress.因此，我将其更改为:

I changed your moveTo function. It was using progress starting from 0. So, I change to this:

var progress = oldValue + (percentOfPercent * (perc - oldValue));

这是pl人: https://plnkr.co/edit/RCNNpLXX0Un7LzWW1YDwu?p=preview

我让另一个用户通过var value = Math.random()*100每次单击提交"时将该值设置为一个随机数.我认为它可以按照您想要的方式工作，请检查它: https://plnkr.co/edit/xj2sGBidjnPN5R9CkA59 ?p =预览

I made this other plunker setting the value to a random number every time the user clicks "submit", using var value = Math.random()*100. I believe it's working the way you want, check it: https://plnkr.co/edit/xj2sGBidjnPN5R9CkA59?p=preview

这篇关于从上一个值更新位置/转换(量表/d3.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！