Javascript D3：以打字机样式转换的文本

在这种情况下，标签通过减少旧文本的字体，进而增加新文本的字体，从一个文本过渡到另一个文本

---

然而，我希望新的文本以“打字机”的方式出现，就像这样。如何编写一个定制的D3文本插值器，以这种“打字机”方式实现文本转换？

我尝试了一下。我必须说我以前没有D3的经验。我试着把你展示的两把小提琴合二为一。我认为仍有一些清理工作要做，以及何时停止键入，但这些应该是微不足道的

查看

HTML:

<div id="writer">
    <span id='sentence'></span>
    <span id='char'></span>
</div>

#writer{ 
    border: 1px solid black; 
    width:300px; 
    min-height: 200px;
    margin: auto;
}
span
{
    float:left;
}

var text = "Hello World! I'm some typed text!";
var counter = 0;
var speed = 50;

function type()
{
    var sentence = document.getElementById("sentence");
    var lastText = sentence.innerHTML;
    var nextChar = text.charAt(counter);

    counter++;

    transition(nextChar,    
    function()
    {        
        lastText+=nextChar;
        sentence.innerHTML = lastText;
        setTimeout(type, speed);
    });  
}

function transition(char, onComplete) {
    d3.select('#char').transition()  
        .text("")
        .duration(300)
        .style("font-size","1px")
        .transition()
        .duration(300)
        .text(char)
        .style("font-size","16px")
        .each("end", onComplete);
}


type();

JavaScript:

<div id="writer">
    <span id='sentence'></span>
    <span id='char'></span>
</div>

#writer{ 
    border: 1px solid black; 
    width:300px; 
    min-height: 200px;
    margin: auto;
}
span
{
    float:left;
}

var text = "Hello World! I'm some typed text!";
var counter = 0;
var speed = 50;

function type()
{
    var sentence = document.getElementById("sentence");
    var lastText = sentence.innerHTML;
    var nextChar = text.charAt(counter);

    counter++;

    transition(nextChar,    
    function()
    {        
        lastText+=nextChar;
        sentence.innerHTML = lastText;
        setTimeout(type, speed);
    });  
}

function transition(char, onComplete) {
    d3.select('#char').transition()  
        .text("")
        .duration(300)
        .style("font-size","1px")
        .transition()
        .duration(300)
        .text(char)
        .style("font-size","16px")
        .each("end", onComplete);
}


type();

---

我认为自动键入文本会更容易。因此，我迭代了每个字符并调用了转换方法。我在它的

行

和

列

中添加了两个参数，以便可以给出适当的延迟

data.forEach(function(d,row) {
    d.split("").forEach(function(d,column) {
        transition(row,column);
    });
});

function transition(row,column) {
   d3.select('text').datum(data[row].split("").slice(0,column+1))
    .transition()
    .delay(function(d) { return (row*5000) + (column*50); } )
    .text(function(d){return d.join("");});
}

---

试试这把小提琴：

有趣的想法，两者都能完成任务，但有一种d3特有的方法：定制

在这里拉小提琴：

代码：

传递给

.tween（）

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

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

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

此函数将在转换的每一个“滴答”处被调用，并传递一个介于0和1之间的值，该值表示结果应该经过转换的距离。（0变为1的速率将根据缓和参数的不同而变化，我已使用线性缓和来实现类型的稳定速率。）

为属性或样式指定自定义tween函数时，tween函数将返回转换中该点用于该属性或样式的值。对于泛型

transition.tween（）

，不使用返回值，您的函数实际上必须自己进行更改——这是通过直接设置元素的

textContent

属性来实现的。我将其设置为目标文本的子字符串，其中子字符串中的字符数由

t

参数（始终介于0和1之间）和文本长度决定，以便在转换长度中键入整个文本

另外，你也可以享受放松功能带来的乐趣。“弹跳”的轻松让打字员看起来不确定他们在写什么：

---

我不明白打字机的风格是什么？大小从小到大？OP显然是指在屏幕上键入的文本。很好。来到StackOverflow是值得的。@bits:=）。。。另外，关于自定义tween函数的另一个示例和更多解释，请参见。我在正在转换的文本末尾添加了垂直线以模拟光标（插入符号）（…：）谢谢我忍不住在您的解决方案（）上添加了一些随机性，这样看起来就像是一个真人在键入文本一样。；）原创、创意的解决方案！