1

ここに画像の説明を入力ここに画像の説明を入力

マップ上にマーカーをプロットし、マーカーからアラーム リングがスムーズにアニメーション化されるアプリケーションを構築しています。

マーカーには次のプロパティがあります

  • サイズ
  • x 座標
  • y 座標
  • アラーム評価

アラームの評価が低い場合 - リングが非常にゆっくりと脈動するようにします。

これは、ある時点で出会い系アプリで使用されるため、同様のアラーム評価は、デートする別の人を緊急に探している人々を表します. マップがユーザーの現在の場所に収まり、緊急のユーザーのリングが表示された場合は適切です。

これが最新のフィドルですhttp://jsfiddle.net/NYEaX/367/

これは私が構築しようとしているものです - http://demo.joostkiens.com/het-parool-4g/

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 100*circleData.alarmLevel;
                                          })
                                          .attr("r", radius + 100 )
                                          .attr("opacity", 0)
                                          .remove();
                                    transition.each('end', myTransition);
                                }

                          datapoints.each(myTransition);
                        }
4

2 に答える 2

0

ここに画像の説明を入力

これは例とほぼ一致しているようです。http://jsfiddle.net/NYEaX/468/

これが私が使用した設定です。

                function getDurationPerDot(circleData){
                    var totalTime = 3000;//3 seconds max
                    var time = totalTime-(circleData.alarmLevel*10)
                    return time;
                }

                function getOuterRadiusPerDot(circleData){
                    var radius = circleData.alarmLevel*.5;
                    return radius;
                }
于 2014-03-14T19:31:29.170 に答える