javascript - 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 菜鸟，还没有找到这种行为的例子。

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());