Javascript 如何设置此峰值图表的动画？

我不熟悉CSS和Javascript，所以我正在努力制作我在codepen上找到的峰值（条形）图表的动画…：

/*基于aaronlsilber笔的饼图(http://codepen.io/aaronlsilber/pen/IqrkL)这是基于詹姆斯·利顿的一篇文章(http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/) */
/*峰值图表Javascript
=====================================================================*/
var peakColors=['rgb（236208，120）''rgba（21791，67，0.7）''rgba（192，41，66，0.7）''rgba（84，36，55，0.7）''rgba（83119，122，0.7）''rgba（119146，1740.7）'；
函数drawPeakChart（canvasId）{
变量i，开始，峰值点，
canvas=document.getElementById（canvasId），
peakData=canvas.dataset.values.split（'，）.map（函数（x）{return parseInt（x，10）}），
ctx=canvas.getContext（'2d'），
max=Math.max.apply（数学，峰值数据），
plotBase=canvas.width/peakData.length，
重叠=plotBase*.4；
plotBase+=canvas.width*.05；
ctx.clearRect（0,0，canvas.width，canvas.height）；
对于（i=0；i
正文{
字体：标准400 1rem/1.5“Segoe UI”、“Helvetica Neue”、“DejaVu Sans”、Helvetica、Arial、Sans serif；
}
旁白{
浮动：左；
右边距：100px；
}
.图表{
页边距底部：0；
边际上限：0；
}
.vert>画布，.vert>ol{
显示：内联块
}
.horiz>li{
显示：内联；
右边填充：20px；
}
.传奇{
垂直对齐：顶部；
左侧填充：15px；
列表样式：无；
}
.钥匙{
位置：相对位置；
}
.钥匙：以前{
内容：“；
位置：绝对位置；
最高：35%；
左：-15px；
宽度：10px；
高度：10px；
}
.1：在{背景：rgb（236、208、120）}之前
.2：在{背景：rgba（217,91,67,0.7）}之前
.3：在{背景：rgba（192,41,66,0.7）}之前
.4：在{背景：rgba（84,36,55,0.7）}之前
.5：在{背景：rgba（83、119、122、0.7）}
.six:在{背景：rgba（119146174,0.7）}之前

此浏览器不支持HTML5画布。
一个
两个
三
四
五
六
只需在绘制三角形条的零件周围添加一个动画循环，如下所示

var animationSteps = 60;
var animationStepCounter = 0;
var animation = setInterval(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (i = 0; i < peakData.length; i++) {
        start = i === 0 ? 0 : i * plotBase - i * overlap;
        peakPoint = canvas.height - Math.round(canvas.height * (peakData[i] / max) * animationStepCounter / animationSteps);
        ctx.fillStyle = peakColors[i];
        ctx.beginPath();
        ctx.moveTo(start, canvas.height);
        ctx.lineTo(start + plotBase * .5, peakPoint);
        ctx.lineTo(start + plotBase, canvas.height);
        ctx.lineTo(start, canvas.height);
        ctx.fill();
    }

    if (animationStepCounter === animationSteps)
        clearInterval(animation);
    else
        animationStepCounter++;
}, 10);

var animationSteps=60；
var animationStepCounter=0；
var animation=setInterval（函数（）{
clearRect（0，0，canvas.width，canvas.height）；
对于（i=0；i

它所做的一切就是绘制钢筋60次（在重画之间等待10毫秒），每次增加钢筋高度，直到达到实际高度

如果希望动画进行得更快（减少一个或两个）/更平滑等，可以更改60或10毫秒


CodePen-
嘿，安娜，带有图形动画的笔使用d3.js。您可以尝试自己构建功能，也可以只使用d3.js。你想要什么？嗨。嗯，我想自己构建功能。我一直在尝试更改CSS和/或javascript来创建动画。但我必须承认，我完全迷路了。。。基本上，我只想添加“增长条”效应…：/