一度に1文字（またはチャンク）を追加するテキストを追加したいd3

Question

[OK]を、1つ1つのチャンクでテキストを追加する（または単語でグループ化して画面に追加する）という考えで遊んでいます。

私は個々のデータ要素を追加するのに苦労しています。何かご意見は？

JSフィドル：https://jsfiddle.net/yh7k4tbt/2/

function textAppend() { 

    var width = 960, 
    height = 500; 

    var svg = d3.select('#flex-title').append('svg') 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(32," + (height/2) + ")"); 

    var data = 'Welcome to the Jungle!'.split(' '); 

    console.log('data is: ', data); 

    var step = 0, 
    dataToPlot = []; 

    var textAdd = setInterval(
    function(){ 
    dataToPlot.push(data[step]); 
    step += 1; 
    console.log('step is: ', step); 
    // stop once all data is plotted 
     if (step > data.length) { 
     clearInterval(textAdd); 
    } else { 
    update(); 
    } 

    } 
    ,1000); 

    function update() { 
    var t = d3.transition() 
     .duration(750); 

    // JOIN new data with old elements. 
    var text = svg.selectAll("text") 
     .data(data); 

    // ENTER new elements present in new data. 
    text.enter().append("text") 
     .attr("dy", ".35em") 
     .attr("y", -60) 
     .attr("x", function(d, i) { return i * 64; }) 
     .style("fill-opacity", 1e-6) 
     .style('fill', 'black') 
     .text(function(d) {console.log('d is :', d); return d; }) 
     .transition(t) 
     .attr("y", 0) 
     .style("fill-opacity", 1); 
    } 

}; 

textAppend(); 

Answer 1

あなたは一つのコアのミスと1つのマイナーな間違いがあります。

コア間違いを：それは.data(dataToPlot);ない.data(data);

マイナー間違いでなければなりませんが、あなたが実装方法ですカウント機能。これは、より正確かつ簡潔である：

var textAdd = setInterval(
    function() { 
    // stop once all data is plotted 
    if (step >= data.length) { 
     clearInterval(textAdd); 
     return; 
    } 

    dataToPlot.push(data[step]); 
    console.log('step is: ', step); 
    update(); 
    step++; 
    } 
,1000); 

の作業フィドル：https://jsfiddle.net/yh7k4tbt/3/