CODEWITHSUNDEEP
javascriptd3.js
Kalyanam Rajashree
Kalyanam Rajashree

Reputation: 712

updating values using d3

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 ?

Upvotes: 1

Views: 34

Answers (1)

Ganesh Nemade
Ganesh Nemade

Reputation: 1599

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 d.a;
})
.append('span')
.classed('d',true)
.text(function(d){
  return d.b;
}).append('span')
.classed('d',true)
.text(function(d){
  return d.c;
})
; 

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.

Upvotes: 1

Related Questions