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()方法调用修改后的函数，但这会产生一个彻头彻尾的错误（＆＃34;补间不是函数。 ..＆＃34）。作为一个全新的JS，我怀疑这个问题与我对this的脆弱把握有关，虽然我不知道如何解决它。

Answer 1

为了与原始代码具有相同的行为，您需要从runNumber返回一个函数（它本身在调用时返回一个函数）。这应该工作（未经测试）：

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：用命名的

1 个答案: