0

特定のキーワードを含むライブのツイートをプロットする SVG マップを作成しました。各ツイートを円 (またはドット) として画面に描画しています。マップに 50 個のツイートが追加されると、最も古いツイートが消えます。

ここに画像の説明を入力

円がマップ上にある時間に応じて、円に何らかの色の減衰を加えたいと思います。

新しいツイートはマップに表示され、赤色になります。時間が経過すると、マップ上に既にプロットされているポイントがゆっくりと黒くなります。

マップに円を追加する場所は次のとおりです。

function mapTweet(tweetData) {
    var tipText; // Ignore this. For tweet dot hovering.
    var coordinates = projection([tweetData.geo.coordinates[1], tweetData.geo.coordinates[0]]);

    addCircle(coordinates, tipText);
}

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

    // too many tweets
    if (tweetNumber == 50) {
        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("stroke-width", 1)
        .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", 60)
        .style("stroke-width", 2)
        .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("stroke", "rgba(255,49,49,.7)")
        .style("stroke-width", 1)
        .style("fill", "rgba(240,49,49,1)")
        .attr('cx', coordinates[0])
        .attr('cy', coordinates[1])
        .attr('r', rad);

    addTipsy(tipText, tweetNumber); // Ignore this. For tweet dot hovering.
}

円を一度描いたら、色を変えるために描き直す必要はありますか? または、キャンバスに追加した後にドットの属性を変更できますか?

たとえば、20 秒かけて色を減衰させるにはどうすればよいですか?

4

1 に答える 1

0

アニメーション要素を円の子として追加します

.append('svg:animate')
  .attr('attributeName', 'fill')
  .attr('from', 'red')
  .attr('to', 'blue')
  .attr('dur', '20s');

これにより、赤から青、または選択した色に補間されます。

于 2013-01-11T22:32:35.633 に答える