重啓D3條形圖動畫

Question

我工作的一個小部件，顯示了幾個D3條形圖有着不同的價值觀，一前一後，在滑動轉盤。

當頁面加載時，條形圖應該是動畫形式的，但當頁面進入下一個圖表時 - 無論是單擊還是單獨顯示 - 我都希望每次都重新啓動動畫。 我曾嘗試在控制檯中調用animateChart()，但這不起作用。

我正在尋找一個函數，我可以從控制檯或其他函數調用，如animateChart()，它將重新載入D3條形圖動畫。

這裏是我的小部件的鏈接：

http://jsfiddle.net/alocdk/oa5tg1qu/1/

Answer 1

我發現在那裏你可以提高你的animateChart功能。

其實你只修改那名enterring您的圖形數據。

通過調用：

d3.select(svg) 
     .selectAll("rect") 
     .data(data) 
     .enter().append("rect") 
[...] 

一切在這之後，將只適用於新的數據。

您可能需要閱讀這些瞭解遵循與D3的數據更新模式。

• General Update Pattern, I
• General Update Pattern, II
• General Update Pattern, III

這是我現在的投籃http://jsfiddle.net/uknynmqa/1/

我已經刪除你在做你所有的SVG的循環，因爲我認爲你想只能動畫當前的動畫。

而且你的功能更新所有數據，而不僅僅是enterring感謝：

// Update the data for all 
var join = d3.select(svg) 
    .selectAll("rect") 
    .data(data); 

// Append new data. 
join.enter().append("rect")  
    .attr("class", function (d, i) { 
     var low = "" 
     i == minIndex ? low = " low" : ""; 
     return "bar" + " " + "index_" + i + low; 
    }) 

// Update everyone. 
join.attr("width", barWidth) 
    .attr("x", function (d, i) { 
     return barWidth * i + barSpace * i; 
    }) 
    .attr("y", chartHeight) 
    .attr("height", 0) 
    .transition() 
    .delay(function (d, i) { 
     return i * 100; 
    }) 
    .attr("y", function (d, i) { 
     return chartHeight - y(d); 
    }) 
    .attr("height", function (d) { 
     return y(d); 
    }); 

D3是下面一個非常具體的數據更新模式。

取決於你想做什麼，你可以按照這個。這取決於你想要製作動畫或不製作。

// Link data to your graph and get the join 
var join = svg.selectAll('rect') 
    .data(data); 

// Update data already there 
join.attr('x', 0); 

// Append the new data 
join.enter().append('rect') 
    .attr('x', 0); 

// Remove exiting elements not linked to any data anymore 
join.exit().remove(); 

// Update all resulting elements 
join.attr('x', 0);