d3 update number - count up/down instead of replacing number immediately - d3.js

Question

Hei,
I'm updating a bar chart when user presses a button. That works fine with the .transition- property. However, if I do that on text, it replaces the text immediately. Instead what I'd like to happen is that it would count from the old to the new number (while the label moves with the bar). So as an example: a bar is updated from value 1453 to 1102. Instead of replacing 1453 immediately when the user clicks it should count up from 1102 to 1453 over the specified transition time.
Can I achieve that? Is there any d3 function for that?

Answer 1

I uploaded a quick example of text interpolation on bl.ocks. The relevant parts are the custom interpolator:
function interpolateText(a, b) {
var regex = /^(\d+), (\d+)$/;
var matchA = regex.exec(a);
var matchB = regex.exec(b);
if (matchA && matchB) {
var x = d3.interpolateRound(+matchA[1], +matchB[1]);
var y = d3.interpolateRound(+matchA[2], +matchB[2]);
return function(t) {
var result = [x(t), y(t)].join(", ");
return result;
};
}
}
d3.interpolators.push(interpolateText);
And using d3.transition.tween:
.on("dragend", function(d, i) {
var prev = [d.x, d.y].join(", ");
d.x = d.origin[0];
d.y = d.origin[1];
var next = [d.x, d.y].join(", ");
var selection = d3.select(this)
.transition()
.duration(1000)
.call(draw);
selection
.select("text")
.tween("textTween", function() {
var i = d3.interpolate(prev, next);
return function(t) {
this.textContent = i(t);
}
});
});
In my case, I am listening for a drag start/end but you can hook it up to a button press very easily.
The reason the above code works is because .tween will get the same animation "ticks" that the standard interpolators use. This causes the inner t parameter to match the progress of the animation and when you set this.textContent it will update the inner value of the DOM element.
The example I use is interpolating between two points which is fairly trivial but if all you want is to update text containing exactly one number it is even easier.