當在數據源之間切換時，D3.js轉換條形圖

Question

我使用D3.js創建條形圖。我有基於用戶輸入之間切換多個源的CSV文件：

onclick="showFoo();" 
onclick="showBar();" 

然後：

function showFoo(){d3.csv("teams/foo.csv",type,update)} 
function showBar(){d3.csv("teams/bar.csv",type,update)} 

function update(error, data) { 
x.domain(data.map(function(d){return d.category;})); 
y.domain([0,1]); 
chart.select(".x.axis").remove(); 
chart.append("g") 
    .attr("class","x axis") 
    .attr("transform","translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor","start") 
    .attr("transform","rotate(-90)"); 
chart.selectAll(".bar").remove(); 
chart.selectAll(".bar") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("class","bar") 
    .attr("x",function(d){return x(d.category);}) 
    .attr("y",function(d){return y(d.value);}) 
    .attr("height",function(d){return height - y(d.value);}) 
    .attr("width",x.rangeBand()); 
}; 

我使用的是有序的規模爲我的x軸。數據文件具有不同數量的類別。我想要做的是在兩個數據源之間切換動畫。具體來說，讓第一個柱落下並在x軸下消失，然後從下面彈出新柱。我是一個D3 noob，並沒有能夠找到這種行爲的例子。

Answer 1

爲動畫

使用過渡，拆卸：

chart.selectAll(".bar") 
    .transition() 
    .duration(300) 
    .ease("exp") 
    .attr("width", 0).remove() 

爲了創建

chart.selectAll(".bar") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("class","bar") 
    .transition() 
    .duration(300) 
    .attr("x",function(d){return x(d.category);}) 
    .attr("y",function(d){return y(d.value);}) 
    .attr("height",function(d){return height - y(d.value);}) 
    .attr("width",x.rangeBand()); 

希望這有助於！