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

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"