format number to one decimal place during transition? (d3.js)
<p>I'm trying to work with d3.js formatting but I'm struggling to get the number to only transition to one decimal place.</p>

<p>Please see the example below;</p>

<p><a href="http://plnkr.co/edit/bEpl8wbA3kzsyakGNJZR?p=preview" rel="nofollow">http://plnkr.co/edit/bEpl8wbA3kzsyakGNJZR?p=preview</a></p>

<p>Throughout the transition and also at the end I would like it to only be to one decimal place, so at the end of my example it should show 4.4 and not 4.4162.</p>

<p>Here is my code;</p>

<pre><code>var formatPercent = d3.format("1r");
var start_val = 0;

var data = 4.4162


d3.selectAll(".textTransition")
  .append("div")
  .text(start_val)
  .attr("class", "percentage")
  .transition()
  .duration(1200)
  .tween(".percentage", function(d) {
    var i = d3.interpolate(0, data);
    return function(t) {
      d3.select(this).text(formatPercent(i(t)));
    };
  });
</code></pre>

<p>I am using d3 v3 btw.</p>

<p>Hope someone can help!</p>

<p>Thanks</p>