D3:打字机样式的文本转换

Question

在此jsfiddle,标签通过减少旧文本的字体从一个文本转换到另一个文本,并反过来增加新文本的字体.

但是,我希望新的文本以"打字机"的方式上传,就像在这里一样jsfiddle.如何编写自定义D3文本插补器,以这种"打字机"方式启用文本转换？

Answer 1

有趣的想法,都完成了工作,但有一个特定于d3的方法来做到这一点:自定义补间功能.

在这里小提琴: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()称为补间工厂,因为它为每个元素创建补间函数.在转换开始时,每个元素执行一次(通常使用元素的数据和索引作为参数).它运行任何设置计算,然后返回将在转换期间使用的补间函数.

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

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

这个函数将在转换的每个"tick"处被调用,并传递一个0到1之间的值,表示结果应该在转换的距离.(0更改为1的速率将根据缓动参数而变化,我使用线性缓动来获得稳定的类型.)

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

PS你也可以享受缓和功能."弹跳"的轻松使得打字员看起来不确定他们写的是什么:

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