javascript - D3 : text transitioning in typewriter style

Question

在此jsfiddle ，标签通过减小旧文本的字体从一个文本过渡到另一个文本，然后增加新文本的字体。

但是，我希望新文本以“打字机”的方式出现，例如 jsfiddle .如何编写自定义 D3 文本插值器，以这种“打字机”方式启用文本转换？

Answer 1

有趣的想法，两者都可以完成工作，但有一种特定于 d3 的方法可以做到这一点:自定义 tween function .

在这里 fiddle :http://jsfiddle.net/QbysN/3/

代码:

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() 的外部函数称为 tween 工厂，因为它为每个元素创建了 tween 函数。它在转换开始时针对每个元素执行一次(并且通常使用元素的数据和索引作为参数)。它运行任何设置计算，然后返回将在过渡期间使用的补间函数。

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

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

此函数将在转换的每个“滴答声”时被调用，并传递一个介于 0 和 1 之间的值，表示结果应该经过多远的转换。 (0 变为 1 的速率将根据缓动参数而变化，我使用线性缓动以获得稳定的类型速率。)

当您为属性或样式指定自定义补间函数时，补间函数将返回在过渡的那个点用于该属性或样式的值。对于通用的 transition.tween()，不使用返回值，您的函数实际上必须自己进行更改——我通过直接设置 textContent 属性来实现元素。我将它设置为目标文本的子字符串，其中子字符串中的字符数由 t 参数(始终在 0 和 1 之间)和文本长度决定，因此整个文本在过渡期间被输入。

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

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