d3实现流星拖尾效果

本文主要就是利用d3js去实现一些动态效果，包括路径的渲染过程，节点的呼吸灯效果等等，本次主要是实现流星的拖尾效果。

假设页面上有两个圆点坐标分别为（100，100），（400，400）

<script src="//d3js.org/d3.v4.min.js"></script>

var data = [{x:100,y:100},{x:400,y:400}]; //定义两个圆点的数据
var svg = d3.select('body').append("svg")
.attr("width",1000).attr("height",800);
var g = svg.append("g");
g.selectAll(".circle").data(data).enter().append("circle").attr("cx",function(d){return d.x}).attr("cy",function(d){return d.y}).attr("r",3).attr("fill","red");

因为流星拖尾效果如果用path来画的话，需要解决path画出的图形在渲染动画时方向的问题，特别是流星走的一条线如果是一条曲线的。所以换个思路，可以用多个半径不同的圆来模仿这个效果，直接上代码

var slideG = svg.append("g");
 var slides = d3.range(20).map(function(i){ //生成多个圆数据用于渲染流星效果
                        return {
                              r:i*0.2
                     }
                 });

              slideG .selectAll(".circle_attack_node").data(slides).enter().append("circle")
                  .attr("r",function(o){
                        return o.r;
                     })
                  .attr("fill",function(){
                          return "orange";
                     })
                   .attr("cx",100).attr("cy",100)

  　　　　　　　　　　.attr("filter","url(#glow)")//添加滤镜模糊效果

                     .transition().delay(function(o){
                       return Math.round(500-o.r*40); //添加延迟来模仿流星拖尾效果
                    })
                  .duration(function(){ //根据距离计算持续时间
                          var xdiff = 100 - 400;
                         var ydiff = 100 - 400;
                            var distance = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
                             return Math.round(distance*4);
                       })
                    .attr("cx",400).attr("cy",400) //从点(100,100)到点(400,400)
                  .remove();

再加个滤镜产生模糊效果

//创建滤镜1
     var defs = svg.append("defs");
     var clipWrapper = defs.append("g").attr("class", "clip-group-wrapper");
     var filter = defs.append("filter")
         .attr("width", "300%")
         .attr("x", "-150%")
         .attr("height", "300%")
         .attr("y", "-150%")
         .attr("id","glow");
     filter.append("feGaussianBlur")
         .attr("class", "blur")
         .attr("stdDeviation","1")
         .attr("result","coloredBlur");

至此流星的拖尾效果就完成了。。