D3：打字机风格的文本过渡

In this jsfiddle http://jsfiddle.net/VividD/QbysN/，标签通过减小旧文本的字体，然后增加新文本的字体，从一个文本过渡到另一个文本。

但是，我希望新文本以“打字机”方式出现，就像这样jsfiddle http://jsfiddle.net/VividD/j5Q67/。如何编写自定义 D3 文本插值器，以这种“打字机”方式实现文本转换？

有趣的想法，都可以完成工作，但是有一种 d3 特定的方法可以做到这一点：自定义补间函数 https://github.com/mbostock/d3/wiki/Transitions#wiki-tween.

在这里小提琴：http://jsfiddle.net/QbysN/3/ http://jsfiddle.net/QbysN/3/

Code:

function transition() {
    d3.select('text').transition()
        .duration(5000)
        .ease("linear")
        .tween("text", function () {
            var newText = data[i];
            var textLength = newText.length;
            return function (t) {
                this.textContent = newText.substr(0, 
                                   Math.round( t * textLength) );
            };
        });

    i = (i + 1) % data.length;
}

您传递给的外部函数.tween()被称为补间工厂因为它为每个元素创建补间函数。它在转换开始时对每个元素执行一次（通常使用元素的数据和索引作为参数）。它运行任何设置计算，然后返回将在过渡期间使用的补间函数。

返回的补间函数也称为插值器因为它计算中间值。在这种情况下是：

function (t) {
   this.textContent = newText.substr(0, Math.round( t * textLength) );
};

该函数将在转换的每个“tick”处被调用，并传递一个 0 到 1 之间的值，表示结果应该经过转换多远。 （0 变为 1 的速率将根据缓动参数而变化，我使用线性缓动来实现稳定的类型速率。）

当您为属性或样式指定自定义补间函数时，补间函数将返回要在过渡中的该点用于该属性或样式的值。对于通用的transition.tween()，不使用返回值，您的函数必须实际进行更改本身 - 我通过直接设置textContent元素的属性。我将其设置为目标文本的子字符串，其中子字符串中的字符数由t参数（始终在 0 和 1 之间）和文本的长度，以便整个文本在转换的长度内输入。

附：您可以享受缓动功能的乐趣。 “弹跳”的轻松让打字员看起来不确定他们在写什么：

http://jsfiddle.net/QbysN/4/ http://jsfiddle.net/QbysN/4/