d3.js - 如何为水平 D3 条形图设置动画？

Question

我目前正在使用此 D3 条形图:http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306我想简单地在页面加载时为图表设置动画，从左到右填充。我已经看到了 .transform 的其他片段，但似乎无法理解如何正确地将动画添加到我的图表中。有人介意看看吗？每当我在本地进行更改(我的网络应用程序中安装了基本相同的图表)时，图表就会完全消失，看起来我在某处有语法错误。

Answer 1

对于从左到右的过渡，您只需将初始宽度设置为零，并在 transition() 之后设置其最终值:

 bar.append("rect")
        .attr("transform", "translate("+labelWidth+", 0)")
        .attr("height", barHeight)
        .attr("width", 0)//this is the initial value
        .transition()
        .duration(1500)//time in ms
        .attr("width", function(d){
            return scale(d.value);
        });//now, the final value

这是 fiddle :https://jsfiddle.net/8v88gwqn/

此外，您可以使用延迟来分别过渡每个条:

    bar.append("rect")
        .attr("transform", "translate("+labelWidth+", 0)")
        .attr("height", barHeight)
        .attr("width", 0)
        .transition()
        .duration(1500)
        .delay(function(d,i){ return i*250})//a different delay for each bar
        .attr("width", function(d){
            return scale(d.value);
        });

这是延迟的 fiddle :https://jsfiddle.net/8v88gwqn/1/