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 回答
0

这是一些可能有帮助的代码/概念

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);

  1. 使用'setInterval' 定期调用一个函数（例如，每秒一次或两次），这将在每个数据圈周围创建一个新环。

  2. 在数据圈上使用 .each() 调用创建环，但将它们添加到不同的元素和/或使用不同的类名，这样环和数据点之间就不会混淆。

  3. 将环的初始半径设置为与数据点相同，然后立即在其上开始过渡。使过渡的持续时间成为相关数据圆的“强度”数据值的函数，并使最终半径成为该数据值的函数。还将不透明度转换为值 0。

  4. 为环 .remove() 制作过渡的最后一行，以便每个环在完成扩展后自行移除。

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

于 2014-03-13T15:41:57.723 回答