【 D3.js 高级系列 — 7.0 】 标注地点

有时需要告诉用户地图上的一些目标，如果该目标是只需要一个坐标就能表示的，称其为“标注”。

1. 标注是什么

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

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

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

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

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

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