D3.js在svg地图上标点

原创 2016年06月01日 19:07:38

需要实现的需求就是在一张世界地图上将给定的经纬度坐标点绘制出来。
地图如下:
这里写图片描述
地图使用的是svg格式,而不是d3推荐的GeoJSON格式或TopoJSON格式的地图数据。地图是使用svg格式使用path路径绘制而成。
在地图上会点,首先设置墨卡托投影:

//translate设置投影转换的偏移值d3.geo.graticule()获取经纬网
var projection = d3.geo.mercator().translate([480, 490]).rotate([x_rotate,0,0]),
    graticule = d3.geo.graticule();

然后获取该投影下的路径

var path = d3.geo.path().projection(projection);

然后将结果数据绘制到svg图上:

var paths = map_results.data(results)
  .enter()
  .append("path")
  .attr("d", function(d){return path(d.track)})
  .attr("id", function(d){return "map_" + d.id})
  .attr("class", "svg_trackline")
  .attr("fill", "#f00")
  .attr("stroke", "#f00")
  .attr("stroke-opacity", 1)
  .attr("stroke-width", 4);

其中results的数据格式为:

[{"id":"1001","FileName":"文件1","voyage":"航次1","station":"站位1","track": {"type": "Point", "coordinates": [-74.1682, -37.998]},"observation":"观测方式1","size":"文件大小1","downloads":"1"},
  {"id":"1002","FileName":"文件2","voyage":"航次2","station":"站位2","track": {"type": "Point", "coordinates": [-56.8855, -38.1172]},"observation":"观测方式2","size":"文件大小2","downloads":"2"},
  {"id":"1003","FileName":"文件3","voyage":"航次3","station":"站位3","track": {"type": "Point", "coordinates": [143.0042, -65]},"observation":"观测方式3","size":"文件大小3","downloads":"3"}]
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【 D3.js 入门系列 --- 10 】 地图的绘制

本节学习用 D3 制作地图的方法。需要用到 GeoJSON 文件,这个文件的获取比较困难,我花了一些时间制作好了,希望能与大家分享。本文使用中国地图的数据进行绘制。
  • lzhlzz
  • lzhlzz
  • 2014-08-21 20:33
  • 16936

利用d3.js绘制中国地图

d3.js是一个比较强的数据可视化js工具。利用它画了一幅中国地图,包含省会城市名称,如下图所示:
  • svap1
  • svap1
  • 2014-05-10 18:05
  • 10279

【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行。
  • lzhlzz
  • lzhlzz
  • 2014-12-28 21:04
  • 13279

D3.js SVG绘图实践:趋势缩略图

前言写码,看书,思考,这周挺多感触的。因为手上的项目前端用了Angular,所以UI改版的时候考虑了Angular-material,学校的项目前端用了React,所以也想接入ant-design m...

d3.js——图形缩放平移操作

缩放操作 var width = 400, height = 400; var circles =[{cx:150,cy:200,r:30}, ...

svg平移、放大、缩小及js操作svg

在svg图形中,很重要的概念就是坐标系。首先分析一下width、height、viewBox这三个属性。 width:宽度,这个宽度是指在页面中实际使用的大小,跟div中定义width是同样的含义。...

用SVG实现动态交互式地图

用SVG实现动态交互式地图SVG是目前最火热的图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形,它是基于XML,由W3C联盟进行开发。SVG可以实现...

【D3.js数据可视化系列教程】--(一)简介

D3.js简介

【D3.js数据可视化系列教程】--(二)最简单的开始:添加元素

添加元素
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)