D3.js地圖打點射線動效

D3.js地圖打點射線動效

在項目中，一般使用打點和射線來實現區域的攻防、傳達、運動等需求，

最終效果

http://en.jsrun.net/ZbiKp/emb...

代碼解析

首先引入d3V3和snap

導入地圖數據

{"type":"FeatureCollection",
 "bbox": [ -180.0, -89.99893, 180.0, 83.59961 ],
  "features":[
{"type":"Feature","properties":{"name":"Afghanistan"},"geometry":{"type":"Polygon","coordinates":[[[61.210817,35.650072],[62.230651,35.270664],[62.984662,35.404041],[63.193538,35.857166],[63.982896,36.007957],[64.546479,36.312073],[64.746105,37.111818],[65.588948,37.305217],[65.745631,37.661164],[66.217385,37.39379],[66.518607,37.362784],[67.075782,37.356144],[67.83,37.144994],[68.135562,37.023115],[68.859446,37.344336],[69.196273,37.151144],[69.518785,37.608997],[70.116578,37.588223],[70.270574,37.735165],[70.376304,38.138396],[70.806821,38.486282],[71.348131,38.258905],[71.239404,37.953265],[71.541918,37.905774],[71.448693,37.065645],[71.844638,36.738171],[72.193041,36.948288],[72.63689,37.047558],[73.260056,37.495257],[73.948696,37.421566],[74.980002,37.41999],[75.158028,37.133031],[74.575893,37.020841],[74.067552,36.836176],[72.920025,36.720007],[71.846292,36.509942],[71.262348,36.074388],[71.498768,35.650563],[71.613076,35.153203],[71.115019,34.733126],[71.156773,34.348911],[70.881803,33.988856],[69.930543,34.02012],[70.323594,33.358533],[69.687147,33.105499],[69.262522,32.501944],[69.317764,31.901412],[68.926677,31.620189],[68.556932,31.71331],[67.792689,31.58293],[67.683394,31.303154],[66.938891,31.304911],[66.381458,30.738899],[66.346473,29.887943],[65.046862,29.472181],[64.350419,29.560031],[64.148002,29.340819],[63.550261,29.468331],[62.549857,29.318572],[60.874248,29.829239],[61.781222,30.73585],[61.699314,31.379506],[60.941945,31.548075],[60.863655,32.18292],[60.536078,32.981269],[60.9637,33.528832],[60.52843,33.676446],[60.803193,34.404102],[61.210817,35.650072]]]},"id":"AFG"},
{"type":"Feature","properties":{"name":"Angola"},"geometry":{"type":"MultiPolygon","coordinates":[[[[16.326528,-5.87747],[16.57318,-6.622645],[16.860191,-7.222298],[17.089996,-7.545689],
//....................

由於數據很長，只貼上了一部分，完整的地圖代碼請在案例中提取。

繪製地圖

var width = 800;
var height = 500;
var svg = d3.select("#map").append('svg')
                    .attr('id',"mapSvg")
                    .attr('width',width)
                    .attr('height',height);
var projection = d3.geo.mercator() //geo座標和瀏覽器座標的換算
                        .center([5, 32])
                        .scale(140)
                        .translate([width / 2, height / 2]);
        var path = d3.geo.path()
                    .projection(projection);

                var mapG = svg.append('g')
                    .attr('id',"mapG");

                    mapG.selectAll("path")
                        .data(root.features)
                        .enter()
                        .append("path")
                        .attr("class","map-path")
                        .attr("stroke", "#212121")
                        .attr("stroke-width", 1)
                        .attr("fill", "#808080")
                        .attr("style","display:block")
                        .attr("d", path);
                        mapG.append("g").attr("id","pointG")
                        pushData();//傳入源和目標的座標並觸發繪製點和線

上面的代碼中將地圖數據轉換成了瀏覽器座標，這樣才能夠繪製出svg的路徑。

傳入打點數據

function pushData(){
                var data = [
                    {
                    from:[161.71533203124997,-10.387304687499991],
                    to:[117.1115,40.7071]
                     },
                    {
                        from:[117.5744140625001,4.17060546875004],
                        to:[115.2686,30.6628]
                    },
                    {
                        from:[90.31328125000007,47.676171874999994],
                        to:[112.6758,30.9979]
                    },
                    {
                        from:[129.71972656249997,42.47500000000005],
                        to:[121.01931115058903, 23.436683457875347]
                    },
                    {
                        from:[-85.73383789062493,68.630126953125],
                        to:[91.1865,30.1465]
                    },
                    {
                        from:[-63.938574218750006,-12.529687499999994],
                        to:[115.2686,30.6628]
                    },
                    {
                        from:[15.000683593750011,46.6259765625],
                        to:[99.613,24.0546]
                    },
                    {
                        from:[106.75341796875003,20.73505859375004],
                        to:[117.1115,40.7071]
                    },
                ];


                //每個動畫獨立互不影響，因此採起分層的原理
               var index = 1;
               setInterval(function(){
                        var n = data.length * Math.random();
                        n = parseInt(n);
                        if(n>7){
                            n = 7
                        }
                
                 var p = d3.select('#pointG').append('svg').attr('id','paper'+index);
                        runAttack('paper'+index,data[n]);
                 index++
                },200);


}

使用定時器觸發繪製打點。

繪製打點及連線

function runAttack(id,data){
               
                
                var height =500;
                var width = 800;
                              var s = Snap('#'+id);
                var projection = d3.geo.mercator()
                        .center([5, 32])
                        .scale(140)
                        .translate([width / 2, height / 2]);
                function makePro(arr){
                    var centroid = projection(arr),
                        x = centroid[0],
                        y = centroid[1];
                    return [x,y]
                }
                var circleF = s.circle(makePro(data.from)[0],makePro(data.from)[1],0);
                var circleT = s.circle(makePro(data.to)[0],makePro(data.to)[1],0);
                var lineL = s.line(makePro(data.from)[0],makePro(data.from)[1],makePro(data.from)[0],makePro(data.from)[1]);
                
                circleF.attr({
                    fill: "rgba(0,0,0,0)",
                    stroke:"r()rgba(24,255,253,0.5)-#34A1FF",
                    'stroke-width':"5px"
                });
                circleT.attr({
                    fill:"#18FFFD",
                    stroke:"r()#34A1FF-rgba(24,255,253,0.5)",
                    'stroke-width':"8px"
                });
                lineL.attr({
                    stroke:"L(" + makePro(data.to)[0] + "," + makePro(data.to)[1] + "," + makePro(data.from)[0] + "," + makePro(data.from)[1] + ")#18FFFD-rgba(0,225,132,0.1)",
                    'stroke-width':"1px",
                    fill:"rgba(0,0,0,0)"
                });

                circleF.animate({r:20,'stroke-width':"1px"},600,function(){
                    circleF.remove();
                });
                lineL.animate({x2:makePro(data.to)[0],y2:makePro(data.to)[1]},500,mina.easeinout,function(){
                    lineL.animate({x1:makePro(data.to)[0],y1:makePro(data.to)[1],'stroke-width':'0'},500,mina.easein,function(){
                      lineL.remove();
                    })
                
                    circleT.animate({r:10},1000,function(){
                      circleT.remove();
                      s.remove();
                    })
                });

            }

這裏涉及了snap的一些基本操做，詳細教程請在官網學習，這裏不重複贅述。
snap的動畫仍是比較容易上手的，原理和jquery的animate差很少。只是snap是針對於svg的動畫框架，在賦予屬性中
很是靈活。在繪製節點前，一樣須要把節點的geo座標轉換成瀏覽器座標。
繪製射線其實就是頭寬尾細的尾部逐漸消失的一條直線。

snap繪製射線雖然能夠無縫和d3的地圖結合，可是很難作到短的連續的射線，從此將會使用tween完成另外一種射線形式。

--修復了defs中漸變定義未清除的問題。