d3.js中的漸進路徑動畫：如何循環顯示d3選區的各個元素，例如區域圖的每個路徑區段？

Question

我在d3.js中完成了this small area chart demo。

我可以將整個圖表作爲一個整體動畫，但無法找到一種方法來逐段製作動畫（我希望它是一個適當的動畫，而不是使用svg-clip的簡單顯示）。例如動畫的圓圈上面的鏈接頁面的代碼只是兩個簡單的線條，我已經打破了這裏的清晰度：

// start frame 
chart 
    .selectAll('circle') 
    .data(data) 
    .enter() 
    .append('circle') 
    .attr('cx', function(d, i) { return x(i); }) 
    .attr('cy', y(0)) 
    .attr('class', 'point').attr('r', 5); 

// end frame 
chart 
    .selectAll('circle') 
    .data(data) 
    .transition() 
    .duration(3000) 
    .attr('cx', function(d, i) { return x(i); }) 
    .attr('cy', function(d, i) { return y(d); }); 

這裏的問題是，所有圓開始和結束立刻。區域圖的各部分也一樣。那麼我應該如何一個接一個地移動它們呢？一種方法是使用d3的delay函數;我不知道我怎麼會爲面積圖的路徑段做到這一點，但對於圈標記數據點，它會是這樣的：

// start frame 
chart 
    .selectAll('circle') 
    .data(data) 
    .enter() 
    .append('circle') 
    .attr('cx', function(d, i) { return x(i); }) 
    .attr('cy', y(0)) 
    .attr('class', 'point').attr('r', 5); 

// end frame 
chart 
    .selectAll('circle') 
    .data(data) 
    .transition() 
    .delay(1000 * c) 
    .duration(3000) 
    .attr('cx', function(d, i) { return x(i); }) 
    .attr('cy', function(d, i) { return y(d); }); 

但要做到這一點，我需要c ，一個接一個地連接到各個圓圈的句柄，就像在一個循環中一樣。

所以我的問題是：

1. 我如何獲得c，手柄的 選擇的單個元素，在圓和的區域（svg.area（） ）圖表？

2. 有沒有比我的delay方法更簡單的方法？

Answer 1

1）c你正在尋找可以通過傳遞函數爲delay()，正是在你的任何attr()呼叫做同樣的方式得到（見documentation）：

.delay(function(d, i) { return 1000 * i; })// i is your "c" 

2 ）使用delay()當然似乎是正確的方法。

AFAIK，你在路徑上也會遇到困難。我不能想出任何方式來做這個，而不是自己動畫底層數據點。