d3:如何插值字符串(其中包含数字)，使数字不被内插

Question

我是javascript方面的新手，但几周前，我刚刚钻研了d3.js，试图创建时空可视化。

我想要实现的是这样的东西(https://jsfiddle.net/dmatekenya/mz5fxd44/)，基于下面所示的代码：

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();

但是，我想使用日期字符串(就像上面代码片段中的w2 )。当我这样做时，d3也会插入字符串中嵌入的数字，输出也不是我想要的。我需要帮助，我如何能够以某种方式创建一个自定义内插器，它可以插值日期字符串，同时忽略它们中的数字。我从d3文档(https://github.com/mbostock/d3/wiki/Transitions#tween)中了解到，可以将自定义内插器推到内插器的d3数组中，但我已经尝试过，但仍然无法使其工作。

需要你的帮助。

Answer 1

也许你需要d3.scaleQuantize()。

例如：

var color = d3.scaleQuantize()
    .domain([0, 1])
    .range(["brown", "steelblue"]);

color(0.49); // "brown"
color(0.51); // "steelblue"