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

在数据源之间切换时，D3.js转换条形图

1 个答案: