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(), но произвел откровенную ошибку («твин не является функцией ...»). Будучи совершенно новым для 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) + '%'); 
     }; 
    }; 
}