D3.js地图打点射线动效

在项目中，通常使用打点和射线来实现区域的攻防、传达、运动等需求，

最终效果

width="100%" height="600" src="//en.jsrun.net/ZbiKp/embedded/all/light/" allowfullscreen="allowfullscreen">

代码解析

首先引入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]},];setInterval(function(){var n = data.length * Math.random();n = parseInt(n);if(n>7){n = 7}runAttack(data[n]);},200);}

使用定时器触发绘制打点。

绘制打点及连线

function runAttack(data){var s = Snap("#pointG");var height =500;var width = 800;//别忘了坐标转换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();})});}

这里涉及了snap的一些基本操作，详细教程请在官网学习，这里不重复赘述。
snap的动画还是比较容易上手的，原理和jquery的animate差不多。只是snap是针对于svg的动画框架，在赋予属性中
非常灵活。在绘制节点前，同样需要把节点的geo坐标转换成浏览器坐标。
绘制射线其实就是头宽尾细的尾部逐渐消失的一条直线。

snap绘制射线虽然可以无缝和d3的地图结合，但是很难做到短的连续的射线，今后将会使用tween完成另一种射线形式。

D3.js地图打点射线动效（结合snap.js）相关推荐

echarts：实现3D地图版块叠加动效散点+轮播高亮效果
需求描述如下图所示,展示3D效果的地图版块,并叠加显示动效散点: 实现思路首先是3D地图版块效果的实现,可以参考广州3D地图:而动效散点的实现,可以参考地图发散分布. 这里再提一个经过尝试并不行的 ...
three相机在模型上_基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师梁神一.背景粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...
下划线代码 css,Css、JS实现下划线动效
本文主要讲述两种下划线动效效果,第一种悬停时 X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左!! 实现的主要效果是利用伪类标签,以及hover,利用transfromm tr ...
js css鼠标经过下划线,Css、JS实现下划线动效
本文主要讲述两种下划线动效效果,第一种悬停时 X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左!! 实现的主要效果是利用伪类标签,以及hover,利用transfromm tr ...
echarts（一）之地图连线动效
效果如下: HTML如下: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
JS鼠标事件实现动效
1 JS鼠标事件 click鼠标点击事件事件对象.onclick=function() {} mousedown / mouseup 鼠标按下/松开事件事件对象.onmousedown =func ...
html5 canvas爆炸,TweenMax.js HTML5/Canvas 爆炸动效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = document.getElementById('canvas'), ctx = ...
前端实现炫酷动效_20个网页动效设计的炫酷神器
如今很多 UI 设计师不是正在做动效,就正在学着做动效. 动效现在已经无处不在了.有的动效可能是一个微妙的悬停效果,使用 Bttn.css 或者是 Hover Buttons 的帮助下,添加到按钮上, ...
Threejs实现穿越云层动效
上文说到,我对<你的性格主导色>活动中最感兴趣的部分就是通过 Three.js 实现穿越云层动效了,据作者说每朵云出现的位置都是随机的,效果很好,下图是我实现的版本. 在线 Demo 首先 ...

D3.js地图打点射线动效（结合snap.js）