2

我正在将点添加到与世界各地的推文相对应的地图上。添加推文时，它将由一个红点表示。

在接下来的 30 秒内（与 Tweet 轮询延迟相同的时间间隔），这些点会慢慢变黑，表明它们已经过时了。

下面的代码就是这样做的，但是在第一次轮询之后，随后的轮询会将地图上所有新旧点的颜色更改为红色。此外，渐变动画仅在映射第一组点时发生。

任何想法为什么？

这是正在运行的地图。在现代浏览器中查看。

function addCircle(coordinates, tipText, r) {
    tweetNumber++;

    // Max number of dots on a map at any given time
    if (tweetNumber == 200) {
        tweetNumber = 0;
    }

    // Removes expired circles 
    $('#' + tweetNumber).remove();

    var rad;
    //determine if radius size needs to be bumped
    if (arguments.length == 3) {
        rad = r;
    } else {
        rad = 3;
    }

    // Add radar-style ping effect
    map.append('svg:circle')
        .style("stroke", "rgba(255,49,49,.7)")
        .style("fill", "rgba(0,0,0,0)")
        .attr("cx", coordinates[0])
        .attr("cy", coordinates[1])
        .attr("r", 3)
        .transition()
        .delay(0)
        .duration(2000)
        .attr("r", 30)
        .style("stroke", "rgba(255,49,49,0.0001)").transition().duration(2000).remove();

    // Add circles representing tweets
    map.append('svg:circle').attr("class", "tweetCircles")
        .attr("id", tweetNumber)
        .style("fill", "rgba(240,49,49,1)")
        .attr("cx", coordinates[0])
        .attr("cy", coordinates[1])
        .attr("r", rad)
            .append("svg:animate") // Fade effect (only works 1st time)
                .attr("attributeName", "fill")
                .attr("from", "rgba(255,0,0,1)")
                .attr("to", "rgba(0,0,0,1)")
                .attr("dur", "30s");

    // Adds a tooltip to each dot to read the tweets
    addTipsy(tipText, tweetNumber);
}
4

0 回答 0