D3地图上如何标注坐标点

原文地址 http://blog.youkuaiyun.com/lzhlzz/article/details/46385299，部分引用，重点关注坐标点的投影转换方法。

1. 标注是什么

标注，是指地图上只需要一个坐标即可表示的元素。例如，在经纬度(116, 39)处画一个圆，在(108, 30)处画一个符号，这些都属于标注，也可以将标注理解为“点元素”。

我们知道，只知道经纬度是不能直接在地图上作图的，需要先用投影函数将其转换成像素坐标。例如，如果要在中国地图上标出“北京”的位置，但是不知道北京的像素坐标。北京的经纬度可通过查询得知是(116.3, 39.9)，将此值作为投影函数的参数即可得到像素坐标。其实，GeoJSON文件的地理信息也是经纬度，也是经过投影函数转换后得到了像素坐标。因此，如果使用同一个投影函数，那么转换后的北京坐标即可直接在地图上绘制。

2. 在D3的地图上如何标注

首先，定义一个投影函数如下。

1. var projection = d3.geo.mercator()  
2.             .center([107, 31])  
3.             .scale(600)  
4.             .translate([width/2, height/2]);  

其次，使用此投影定义地理路径生成器 d3.geo.path，用于绘制地图。

[javascript]  view plain copy

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

然后，以北京的经纬度作为投影的参数，得到北京的像素坐标。

[javascript]  view plain copy

1. var peking = [116.3, 39.9];  
2. var proPeking = projection(peking);  

最后，用上面得到的像素坐标绘制一个圆，该圆就正好位于北京的位置。

[javascript]  view plain copy

1. svg.append("circle")  
2.     .attr("class","point")  
3.     .attr("cx",proPeking[0])  
4.     .attr("cy",proPeking[1])  
5.     .attr("r",8);