D3：用命名函数替换匿名函数

Question

我的缩写工作 D3 代码，带有一个数字补间：

  vLabel.transition()
    .tween('text', function() {
            var n = d3.interpolateNumber(0, frames[i].V);
            return function(t) {d3.select(this).text(n(t).toFixed(1)+'%');};
        });

由于稍后在一系列步进动画中，相同类型的过渡将应用于许多其他元素，因此我想将匿名函数转换为命名函数以供重用。但是，我在下面的尝试会生成 NaN 而不是数字。

function runNumber(start, end, decimal) {
            var n = d3.interpolateNumber(start, end);
            return function(t) {d3.select(this).text(n(t).toFixed(decimal)+'%');};
    }

vLabel.transition()
  .tween('text', runNumber(0, frames[i].V, 1));

我也试过将 d3.select(this).tween 放入函数中并使用 call() 方法调用修改后的函数，但这产生了一个彻底的错误 ("tween is not a function...")。作为 JS 的新手，我怀疑问题与我对 this 的脆弱掌握有关，尽管我不知道如何修复它。

Answer 1

为了具有与原始代码相同的行为，您需要 return 来自 runNumber 的函数（调用时它本身 return 是一个函数）。这应该有效（未经测试）：

function runNumber(start, end, decimal) {
    return function() {
        var n = d3.interpolateNumber(start, end);
        return function(t) {
            d3.select(this).text(n(t).toFixed(decimal) + '%');
        };
    };
}

D3：用命名函数替换匿名函数

D3: replacing anonymous function with a named one

javascript

anonymous-function

d3.js