私はこれに似たものを作成しようとしています http://demo.joostkiens.com/het-parool-4g/
プロットされた円の外側の線が外側にズキズキするところ。
これはこれまでの私のデモです。
いくつかのダミー データを使用して円をプロットしました。上には赤ベースの円があります。アニメーションを呼び出して、アラーム データごとにより鮮やかにするにはどうすればよいですか。アラームレベル。
半径が円周を越えて跳ね返ってからフェードアウトするループアニメーションを作成する方法がわかりません-alarmLevelしきい値に基づいてこの多様性を持っています
理想的には、ループでこのように遷移が発生する必要があります。http://jsfiddle.net/pnavarrc/udMUx/
var speedLineGroup = sampleSVG.append("g")
.attr("class", "speedlines");
speedLineGroup.selectAll("circle.dl-speed-static")
.data(dataset)
.enter().append("circle")
.style("stroke", "red")
.style("fill", "black")
.attr("r", function(d){
return d.value;
})
.attr("cx", function(d){
return d.xcoord;
})
.attr("cy", function(d){
return d.ycoord;
})
.attr("class", "dl-speed-static")
.attr("stroke-opacity", function (e) {
return 1;
//return var
})
.attr("fill-opacity", function (e) {
return 1;
//return var
})
.transition()
.ease("linear")
.duration(200)
.attr("r", function (e) {
return 1;
//return var
})
投稿のアイデアを統合しました。リングの作成を独自の機能に配置し、タイムアウトを削除しました。また、マーカーごとのアラームしきい値に接続しようと試み始めました。
http://jsfiddle.net/NYEaX/102/
しかし、アプリケーションはまだ遅延/バグがあるように見えます-主要な例のようにあまり明確ではありません. これをさらに改善するにはどうすればよいでしょうか。一部のアラーム カウントは低いですが、この方法では、リングの鼓動が早すぎたりちらついたりします。アラームを低くするには、値を反転する必要があるようです。応答を遅くします。
function makeRings() {
var datapoints = circleGroup.selectAll("circle");
var radius = 1;
function myTransition(circleData){
var transition = d3.select(this).transition();
speedLineGroup.append("circle")
.attr({"class": "ring",
"fill":"red",
"stroke":"red",
"cx": circleData.xcoord,
"cy": circleData.ycoord,
"r":radius,
"opacity": 0.4,
"fill-opacity":0.1
})
.transition()
.duration(function(){
return circleData.alarmLevel*100;
})
.attr("r", radius + 100 )
.attr("opacity", 0)
.remove();
transition.each('end', myTransition);
}
datapoints.each(myTransition);
}
これは最新のコードです..
makeRings()
var t = window.setInterval(makeRings, 10000);
function makeRings() {
var datapoints = mapSVG.selectAll("circle.location");
var radius = 1;
function myTransition(circleData){
console.log("circleData", circleData);
var transition = d3.select(this).transition();
speedLineGroup.append("circle")
.attr({"class": "ring",
"fill":"red",
"stroke":"red",
"cx": circleData.x * ratio,
"cy": circleData.y * ratio,
"r":radius,
"opacity": 0.4,
"fill-opacity":0.1
})
.transition()
.duration(function(){
return (circleData.redSum * 100);
})
.attr("r", radius + 30 )
.attr("opacity", 0)
.remove();
transition.each('end', myTransition);
}
datapoints.each(myTransition);
}