特定のキーワードを含むライブのツイートをプロットする 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 秒かけて色を減衰させるにはどうすればよいですか?