Bir kerede bir harf eklemek için metin ister (veya parçalar halinde) d3

Question

Tamam, 1'e 1 tek parça halinde (veya sözcüklere göre gruplandırılarak ve ekrana ekleyerek) metin ekleme fikriyle oynuyorum.

Yine de, tek tek veri öğelerini eklemek için uğraşıyorum. Düşüncesi olan var mı?

JS keman: 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

tek bir çekirdek hata ve bir minör hata vardır:

Çekirdek hata: Bu .data(dataToPlot);.data(data); Eğer yolu uygulanan

Minör hata olduğunu olmamalıdır sayma işlevi. Bu, daha doğru ve özlü:

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); 

Çalışma keman: Ben de bu gördüğümüz gibi https://jsfiddle.net/yh7k4tbt/3/