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>