第一次/长时间（嘎嘎，嘎嘎）。
我有点沮丧，只是被这个谜语难倒，我无法在Snap.svg中解决。这可能是一种疏忽，我会因为失踪而踢我自己，但我现在还没有看到它。
我有x＆amp;我从DOM元素中绘制并存储到一系列数组中的数据，根据某些列中的某些值进行过滤，最终在js中创建ChartLine对象的多个实例。基本上，它按数量对某列进行排序，从RainbowVis.js对象中为每个值的行指定颜色，将每行的所有相关值推送到y的数组中，并在折线图上绘制路径y是值，x是For循环中稳定增长的整数。
我目前在draw（）函数中所做的是：对于每个相关列，使用变量＆＃34; dot＆＃34;创建<circle>。与对象的x＆amp; y变量，分配属性，在半分之一秒内将半径从0到8设置为动画，并添加x＆amp; y i的值<path>到我在For循环之后创建的setTimeout()中使用的字符串。然后我为路径等制作动画。
没有.animate，效果很好。圆和路径在加载时同时进行动画处理。但是，我希望为每个polyDelayInterval添加延迟，每次迭代中的毫秒数增加var svgMFLC = Snap('svg#ElementID');
function ChartLine(x, y, color, row) {
this.x = x;
this.y = y;
this.color = color;
this.row = row;
var propNames = Object.keys(this.row);
var yAdjust;
var resetX = this.x;
for (var i = 0; i < propNames.length; i++) { // get only the calculated score columns and their values
if (propNames[i].toLowerCase().includes(calcKeyword)) {
yAdjustedToChartArea = chartBottom - (this.row[propNames[i]] * yInterval);
this.y.push(yAdjustedToChartArea); // returns the value of that score column and pushes it to the y array
}
}
this.draw = function () {
var points = "M"; // the string that will determine the coordinates of each line
var dotShadow = svgMFLC.filter(Snap.filter.shadow(0, 0, 2, "#000000", 0.4));
var polyTime = 1500; // in milliseconds
var dot;
var polyDelayInterval = polyTime / (semesterCols.length - 1);
for (var i = 0; i < semesterCols.length; i++) { // for each data point, create a "dot"
dot = svgMFLC.circle(this.x, this.y[i], 0);
dot.attr({
fill: this.color,
stroke: "none",
filter: dotShadow,
class: "chartPointMFLC"
});
setTimeout(function () {
dot.animate({ r: 8 }, 250, mina.easeout);
}, polyDelayInterval * i);
points += this.x + " " + this.y[i] + " L";
this.x = this.x + xInterval;
}
points = points.slice(0, -2); // take away the excessive " L" from the end of the points string
var poly = svgMFLC.path(points);
var polyLength = poly.getTotalLength();
poly.attr({
fill: "none",
stroke: this.color,
class: "chartLineMFLC",
strokeDasharray: polyLength + " " + polyLength, // setting the strokeDash attributes will help create the "drawing the line" effect when animated
strokeDashoffset: polyLength
});
poly.animate({ strokeDashoffset: 0.00 }, polyTime);
this.x = resetX;
}
}
，因此每个＆＃34; dot＆＃34;线条到达时动画。至少，我想要动画所有的＃34;点＃34;路径完成动画后。
问题是，无论我到目前为止尝试过什么，我只能得到最后一组＆＃34;点＆＃34; （在每行的最高x值处）动画;其余的留在r：0。我在这里和其他地方读过几个有点类似的帖子;我在他们的网站上搜索过Snap.svg的文档。我无法找到我做错的事。提前谢谢！
<p className={'text-success ' + styles.ff}>Uthaya</p>
答案 0 :(得分：0)
我无法在没有完整代码测试的情况下提供经过测试的解决方案，但几乎可以肯定的是，您至少需要为您的“点”解决问题。元件。
所以这一行...
setTimeout(function () {
dot.animate({ r: 8 }, 250, mina.easeout);
}, polyDelayInterval * i);
当涉及到呼叫该功能时，＆＃39; dot＆＃39;将是最后一个＆＃39;点＆＃39;从循环。所以你需要创建一个闭包（为点创建功能范围）。
有点像......
(function() {
var laterDot = dot;
setTimeout(function () {
laterDot.animate({ r: 8 }, 250, mina.easeout);
}, polyDelayInterval * i)
})();