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 ?
Add a comment
|
1 Answer
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.
7 Comments
Kalyanam Rajashree
I want to print the next set of a,b,c values at the same place as that of the earlier set of values.
Kalyanam Rajashree
i.e., delete the earlier values and display the new values.
Kalyanam Rajashree
jsfiddle.net/c5YVX/8 I want something similar to this. Not multiple line display though, only one line display having a,b,c values
Ganesh Nemade
I have updated the code as per your requirement. Please check
Kalyanam Rajashree
That delay is just time in milli seconds between any two rows' display right ?
|