D3.js在数据源之间切换时的过渡条形图

D3.js transition bar chart when switching between data sources

本文关键字：条形图 js 数据源 之间 D3      更新时间：2023-09-26

>我正在使用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菜鸟，找不到这种行为的例子。

使用过渡进行动画

对于移除：

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());
相关文章：