javascript - 从最后一个值更新位置/转换(gauge chart/d3.js)

Question

我正在尝试重新利用我找到的仪表盘 here .目前我的指针在提交时移动，但是在更新到新位置之前它会重置为 0，我宁愿它直接调整位置。

在尝试想办法做到这一点时，我认为我需要修改这段处理重置的代码；

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，或者只是尝试完全删除重置功能？

但我不确定如何才能做到这一点。

这里是更新函数；

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

我做了一个plnk，并尝试去掉与问题无关的所有内容以减少代码，只需单击提交以更新位置，希望问题有意义。

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

我认为这一切可能有点老套，但我还是希望有人能提供帮助!

谢谢

Answer 1

我更改了您的moveTo 函数。它使用从 0 开始的 progress。所以，我改为:

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

这里是 plunker:https://plnkr.co/edit/RCNNpLX0Un7LzWW1YDwu?p=preview

我使用 var value = Math.random()*100 使这个另一个 plunker 每次用户单击“提交”时将值设置为随机数。我相信它按照你想要的方式工作，检查它:https://plnkr.co/edit/xj2sGBidjnPN5R9CkA59?p=preview