javascript - d3: how to interpolate a string (with numbers in it) so that the numbers don't get interpolated -

i'm newbie in javascript few weeks delved d3.js trying create spatio-temporal visualisation.

what want achieve (https://jsfiddle.net/dmatekenya/mz5fxd44/) based on code shown below:

var w1 = ["dunstan","mercy","lara","khama"]; var w2 =["august 1,2013","august 2,2013","august 3,2013"] var text = d3.select("body")             .attr("fill","red")             .text("dunstan")             .attr("font-size", "50px");   var j = 0; var transition = function() { return text.transition().duration(500).tween("text", function() {    var = d3.interpolatestring(w1[j], w1[j + 1]);    return function(t) {     this.textcontent = i(t);   }; }).each('end', function() {   j += 1;   if (!(j > w1.length)) return transition(); }); }; transition(); 

however, instead want use date string ( w2 in code snippet above). when d3 interpolates numbers embedded in string , output isn't i'm looking for. need on how can somehow create custom interpolator can interpolate date string while ignoring numbers in them. know d3 documentation (https://github.com/mbostock/d3/wiki/transitions#tween) thats possible push custom interpolator d3 array of interpolators have tried , still cannot work.

kindly need help.

maybe need d3.scalequantize().

for instance:

var color = d3.scalequantize()     .domain([0, 1])     .range(["brown", "steelblue"]);  color(0.49); // "brown" color(0.51); // "steelblue"