D3:以打字机样式转换文本 [英] D3: text transitioning in typewriter style

问题描述

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

In this jsfiddle, label transitions from one text to another by decreasing font of old text, and in turn increasing the font of new text.

但是，我希望以打字机"的方式将新文本添加到aptar，例如 jsfiddle .如何编写一个自定义D3文本插值器，以这种打字机"方式转换文本?

However, I would like new text to apperar in "typewriter" fashion, like in this jsfiddle. How to write a custom D3 text interpolator that will enable text transitioning in this "typewriter" way?

推荐答案

有趣的想法都可以完成工作，但是有一种d3特定的方式来做到这一点:自定义

Interesting ideas, both get the job done, but there's a d3-specific way to do this: a custom tween function.

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

The outer function that you pass to .tween() is called a tween factory because it creates the tween function for each element. It is executed once per element (and would normally use the data and index of the element as parameters), at the start of the transition. It runs any set-up calculations and then returns the tween function that will be used during the transition.

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

The returned tween function is also called an interpolator because it calculates intermediary values. In this case it is:

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

此函数将在转换的每个滴答"中调用，并在0到1之间传递一个值，该值表示结果应该通过转换的距离. (0变为1的速率将根据缓动参数而变化，我使用线性缓动来获得稳定的类型速率.)

This function will get called at every "tick" of the transition, and passed a value between 0 and 1 representing how far through the transition the result is supposed to be. (The rate at which 0 changes to 1 will vary according to the easing parameter, I've used linear easing for a steady rate of type.)

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

When you are specifying custom tween functions for attributes or styles, the tween function would return the value to be used for that attribute or style at that point in the transition. For the generic transition.tween(), return values are not used, your function has to actually make the change itself -- which I do by directly setting the textContent property of the element. I set it to a substring of the target text, where the number of characters in the substring is determined by the t parameter (which is always between 0 and 1) and the length of the text, so that the entire text gets typed out in the length of the transition.

P.S.您也可以使用缓动功能. 弹跳"的缓解使打字员看起来不确定他们在写什么:

P.S. You can have fun with the easing function, too. The "bounce" ease makes it look like the typist is unsure about what they are writing:

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

这篇关于D3:以打字机样式转换文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！