D3: how to interpolate a string (with numbers in it) so that numbers are not interpolated

I'm new to javascript but just dived into d3.js a few weeks ago trying to create space-time rendering.

What I want to achieve is something like this ( https://jsfiddle.net/dmatekenya/mz5fxd44/ ) based on the 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 i = 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, I want to use a date string instead (like w2 in the code snippet above). When I do this, d3 also interpolates the numbers embedded in the string, and the result is not what I'm looking for. I need help on how can I somehow create a custom interpolator that can interpolate the date string, ignoring the numbers in them. I know from the d3 documentation ( https://github.com/mbostock/d3/wiki/Transitions#tween ) that lets you push a custom interpolator into an array of d3 interpolators, but I tried and can't get it to work.

I am sorry for the help.