updating values using d3

Question

I have a csv file which has three columns x,y,z. There are 50 such triplets. I need to print each triplet(row) at once with a duration of some 1 sec between the values. So every second I need to print 1st set of x,y,z and then nxt second, remove them and print the next set and so on. This should be done without reloading the page or clicking on any button. How do I do this ?

Answer 1

You can do as follows, jsbin link

 var arr = [ {a:1, b:2, c:3 },{a:4, b:5, c:6 },{a:7, b:8, c:9 },{a:11, b:22, c:33 } ]; var rows = d3.select('body') .selectAll('.row') .data(arr); var elements = rows.enter() .append('div') .attr('class', function(d,i){ return 'row'+i; }) .classed('row', true) .style('display', 'none') .append('span') .classed('d',true) .text(function(d){ return da; }) .append('span') .classed('d',true) .text(function(d){ return db; }).append('span') .classed('d',true) .text(function(d){ return dc; }) ; var index = 0; var domElementsLength = elements[0].length; function show(){ setTimeout(function(){ d3.selectAll('.row').style('display','none'); d3.select('.row'+index).style('display', 'block'); index = index +1; if(index < domElementsLength){ show(); } console.log(index); }, 100); } show(); 

 span { width: 50px; margin: 10px; border-bottom: 1px solid red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

Hope this helps for your requirement.