Question

enter image description here

我正在构建一个可以在地图上绘制标记的应用程序 - 并且可以从标记中平滑地设置闹铃动画。

标记将具有以下属性

尺寸
x坐标
y坐标
警报评级

如果警报等级很低 - 我希望戒指能够非常缓慢地砰地跳动，如果它的高音更快，可能会更快地跳出来。

这将在某个时刻用于约会应用程序，因此警报评级将代表人们迫切希望找到另一个人约会。如果地图落在用户当前位置并且紧急用户的响铃进入视野，那就太好了。

这就是我的目标 - 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);
                        }

Answer 1

以下是一些可能有用的代码/概念

window.setInterval(makeRings, 1000);

function makeRings() {

datapoints.each(function(circleData){  
   //datapoints is your d3 selection of circle elements

speedLineGroup.append("circle")
  .attr({"class": "ring",
         "fill":"red", //or use CSS to set fill and stroke styles
         "stroke":"red",
         "cx": circleData.xCoord,
         "cy": circleData.yCoord,
             //position according to this circle's position
         "r":radius, //starting radius, 
                     //set according to the radius used for data points
         "opacity": 0.8, //starting opacity
         "fill-opacity":0.5 //fill will always be half of the overall opacity
        })
  .transition()
  .duration( intensityTimeScale(circleData.intensity) )
      //Use an appropriate linear scale to set the time it takes for 
      //the circles to expand to their maximum radius.
      //Note that you *don't* use function(d){}, since we're using the data
      //passed to the .each function from the data point, not data
      //attached to the ring
  .attr("r", radius + intensityRadiusScale(circleData.intensity) )
      //transition radius
      //again, create an appropriate linear scale
  .attr("opacity", 0) //transition opacity
  .remove(); //remove when transition is complete

});
}




    function myTransition(d){
var transition = d3.select(this).transition();

        //Forward transition behavior goes here
        //Probably create a new circle, expand all circles, fade out last circle

        transition.each('end', myTransition); //This calls the backward transition
    }

    d3.select('myFlashingElement').each(myTransition);

使用'setInterval'定期调用函数（例如，一次或者每秒两次）将围绕每个数据创建一个新的环圈。
在数据圈上使用.each（）调用创建响铃，但添加它们是不同的元素，和/或不同的类名所以环和数据点之间没有混淆。
将环的初始半径设置为与数据点相同，但随后立即开始转型。使持续时间转换是“强度”数据值的函数关联数据圈，也使最终半径成为函数那个数据值。同时将不透明度转换为值0。
为戒指.remove（）做过渡的最后一行每个环在完成扩展后自行移除。

在d3中创建循环转换是在转换时使用结束回调。创建两个函数，每个函数创建一个数据转换，一个从起点到终点，另一个返回，让它们在完成时相互调用，如下所示：

Answer 2

enter image description here

这似乎与这个例子非常匹配。 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;
                }

d3.js地图上的悸动标记点

2 个答案: