如何为水平D3条形图制作动画?

问题描述

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

I am currently working with this D3 bar chart: http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306 I would like to simply animate the chart on page load, to fill from left to right. I have seen other snippets of .transform around but cannot seem to grok how to add the animation to my chart correctly. Anyone mind having a look? Whenever I make changed locally (I have basically the same chart installed in my web app) the chart disappears completely and it looks like I have a syntax error somewhere.

推荐答案

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

For transitioning from left to right, you just need to set the initial width to zero and the, after transition(), to its final value:

 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

这是小提琴: https://jsfiddle.net/8v88gwqn/

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

Also, you can use a delay to transition each bar separately:

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

这里是延迟的小提琴: https://jsfiddle.net/8v88gwqn/1/

Here is the fiddle with the delay: https://jsfiddle.net/8v88gwqn/1/

这篇关于如何为水平D3条形图制作动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！