d3：对一系列元素重复过渡吗？

Question

对于一系列元素，在这种情况下，每行三行，我很难过渡到重复。 动画只运行一次就好，但是重复播放（使用相同的数据）时，所有三行合并为一行（ data的最后一个数组）。 我究竟做错了什么？

 (function() { var w = 100, h = 100 var div = d3.select('#sketches').append('div') var svg = div.append("svg") .attr("width", w) .attr("height", h) var x = 0, y = 55 var data = [ [x, y, x+20, y-40], [x+10, y, x+30, y-40], [x+20, y, x+40, y-40] ]; (function lines() { svg.selectAll('line') .data(data).enter().append('line') .attr("stroke", "black") .attr('x1', function(d) {return d[0]}) .attr('y1', function(d) {return d[1]}) .attr('x2', function(d) {return d[2]}) .attr('y2', function(d) {return d[3]}) .transition() .duration(3000) .ease('linear') .attr('x1', function(d) {return d[0] + 60}) .attr('y1', function(d) {return d[1]}) .attr('x2', function(d) {return d[2] + 60}) .attr('y2', function(d) {return d[3]}) .each('end', function(d) { d3.select(this).remove() lines() }) })() })() 

 body { padding: 1rem; } svg { background-color: silver; stroke: black; stroke-width: 1; } 

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

Answer 1

问题是each功能将为您拥有的每一行启动。 因此，实际上您正在执行的操作是每次调用lines()三次。 为什么我不完全确定（仍在查看）一行输出的产量，但由于某种原因，似乎data默认为最后一个数组，因此仅将绘图设置为基于data[3] 。

要修复它，您要确保仅在完成删除所有行后才调用lines() ，因此它只能运行一次。 我很确定有更好的方法（例如，某种形式的承诺，因此在each都运行之后，它将运行一个函数，但是您可以做的是设置一个count ，然后每隔N次运行lines() N是要删除的行数，因为您要遍历数组data并为每个索引附加一行，所以N是data.length 。

（我将查看是否有更清洁的方法来进行此操作，如果找到方法，我将编辑答案，但希望这至少可以帮助您理解问题）

 (function() { var w = 100, h = 100 var div = d3.select('#sketches').append('div') var svg = div.append("svg") .attr("width", w) .attr("height", h) var x = 0, y = 55 var data = [ [x, y, x+20, y-40], [x+10, y, x+30, y-40], [x+20, y, x+40, y-40] ]; var count = 0; (function lines() { svg.selectAll('line') .data(data).enter().append('line') .attr("stroke", "black") .attr('x1', function(d) {return d[0]}) .attr('y1', function(d) {return d[1]}) .attr('x2', function(d) {return d[2]}) .attr('y2', function(d) {return d[3]}) .transition() .duration(3000) .ease('linear') .attr('x1', function(d) {return d[0] + 60}) .attr('y1', function(d) {return d[1]}) .attr('x2', function(d) {return d[2] + 60}) .attr('y2', function(d) {return d[3]}) .each('end', function(d) { d3.select(this).remove() count++; if (count == data.length) { count = 0; lines(); } }) })() })() 

 body { padding: 1rem; } svg { background-color: silver; stroke: black; stroke-width: 1; } 

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