Question

我有一个csv文件，它有三列x，y，z。有50个这样的三胞胎。我需要一次打印每个三元组（行），值之间的持续时间约为1秒。所以每一秒我需要打印第一组x，y，z然后再打印nxt，删除它们并打印下一组等等。这应该在不重新加载页面或单击任何按钮的情况下完成。我该怎么做？

Answer 1

你可以这样做， jsbin link

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有助于满足您的要求。

使用d3更新值

1 个答案: