D3.js创建物流地图实例分享

来源：动视网责编：小OO 时间：2020-11-27 20:04:36

D3.js创建物流地图实例分享

示例图；制作思路；需要绘制一张中国地图，做为背景。需要主要城市的经纬坐标，以绘制路张起点和终点。接收到物流单的城市，绘制一个闪烁的标记。已经有过物流单的目标城市，不再绘制路线。每次新产生一笔物流单，都有一个标记沿路线移向目标的动画效果。绘制结束后的数据，需要清理掉，以减少对浏览器的资源占用。开始撸码；1.创建网页模板；加载D3JS，为了方便调试，直接下载d3.js文件在本地，实际使用的时候，可以换成加载路径。注意，使用的是V4版的D3，和V3版有差异。创建一个p块，准备绘图。；

推荐度：

点击下载本文 文档为doc格式

导读示例图；制作思路；需要绘制一张中国地图，做为背景。需要主要城市的经纬坐标，以绘制路张起点和终点。接收到物流单的城市，绘制一个闪烁的标记。已经有过物流单的目标城市，不再绘制路线。每次新产生一笔物流单，都有一个标记沿路线移向目标的动画效果。绘制结束后的数据，需要清理掉，以减少对浏览器的资源占用。开始撸码；1.创建网页模板；加载D3JS，为了方便调试，直接下载d3.js文件在本地，实际使用的时候，可以换成加载路径。注意，使用的是V4版的D3，和V3版有差异。创建一个p块，准备绘图。；

本文主要介绍了使用D3.js创建物流地图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

示例图

制作思路

需要绘制一张中国地图，做为背景。
需要主要城市的经纬坐标，以绘制路张起点和终点。
接收到物流单的城市，绘制一个闪烁的标记。
已经有过物流单的目标城市，不再绘制路线。
每次新产生一笔物流单，都有一个标记沿路线移向目标的动画效果。
绘制结束后的数据，需要清理掉，以减少对浏览器的资源占用。

开始撸码

1.创建网页模板

加载D3JS，为了方便调试，直接下载d3.js文件在本地，实际使用的时候，可以换成加载路径。注意，使用的是V4版的D3，和V3版有差异。

创建一个p块，准备绘图。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf8">
 <script type="text/javascript" src="../../static/d3/d3.js"></script>
 <title>地图</title>
 </head>
 <body>
 <p class="fxmap">
 </p>
 </body>
 <script type="text/javascript"></script>
</html>

创建SVG，以下所有代码放在<script></script>中

创建SVG图形分组，以备调用