D3: replacing anonymous function with a named one
<p>My abbreviated working D3 code with a number tween:</p>

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

<p>Since the same kind of transition will apply to a number of other elements later in a series of stepped animations, I'd like to turn the anonymous function into a named one to be reused. However, my attempt below produces <code>NaN</code> instead of a number.</p>

<pre><code>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));
</code></pre>

<p>I've also tried placing <code>d3.select(this).tween</code> inside the function and calling the modified function with the <code>call()</code> method, but that produced an outright error ("tween is not a function..."). Being brand-new to JS, I suspect the problem has to do with my tenuous grasp of <code>this</code>, although I don't know how to go about fixing it.</p>