d3.js leaflet.js OpenStreetMap的综合应用

                                        一个可视化的工作案例

效果图

代码的边捆绑算法借鉴了D3.JS官方案例的js库。 链接如下：点击打开链接

案例分析

本案例展示的上海市某一天12点出租车数据流量图，先将上海市进行区域划分，之后将出租车数据映射到相应的区域，并映射到osm地图上。最后用当D3标注出区域以及流量图。

一. 准备数据

对上海市出租车数据进行处理，处理后部分文件显示如下。data.json文件

{"node":[
{
"id":0,
"x":1211.85,
"y":311.25
},
{
"id":1,
"x":1212.0499,
"y":311.25
},
{
"id":2,
"x":1212.2499,
"y":311.25
},.....],

"edge":[
{
"id":0,
"source":1,
"target":138,
"num":1
},
{
"id":1,
"source":1,
"target":141,
"num":1
},.....],

"num":[
0,2,4,6,9,2,5,4,13,91,33,24,19,11,0,5,0,3,16,18,
2,2,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,3,5,....]}

二.可视化展示

首先加载osm地图，之后访问json文件，最后显示效果。（注意，d3访问文件是要开本地服务器的，建议使用node.js开启本地服务器，安装node.js后，在相应文件夹中打开命令行，输入http-server，在浏览器打开即可）。

本处使用了一种边捆绑算法，减弱了边捆绑之间的相互遮挡的问题。

代码如下：

相关说明：本处使用的不是最新版的leaflet.js库，d3用的是d3.v3版本。

d3-ForceEdgeBundling.js可在图下的链接找到。