有时候，需要在地图上绘制连线，表示“从某处到某处”的意思，这种时候在地图上绘制的连线，称为“标线”。

标线，是指地图上需要两个坐标以上才能表示的元素。例如，北京和上海之间连线。用于绘制标线的图形元素有两种：线段元素<line>和路径元素<path>。如果是在平面地图上，且不要求两点之间有曲线，<line>已足够；如果是在球面地图上，或对于平面地图上的曲线，则需使用<path>。标线有时带有箭头，表示方向。

2. 如何添加带箭头的标线

如果需要表示标线的方向，则可以在末端加箭头。【进阶 - 第 4.0 章】，提到了给SVG定义标记，从而为<line>或<path>添加箭头的方法。箭头的标记如下：

<defs>
<marker  
	markerUnits="strokeWidth" 
	markerWidth="12" 
	markerHeight="12" 
	viewBox="0 0 12 12" 
	refX="6" 
	refY="6" 
	orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" 
style="fill: #000000;" />
</marker>
</defs>

标记是定义在<defs>中的。其中，<marker>是标记的主体，<marker>中的<path>是标记的图形，此处是箭头的路径，也可用其他图形，如圆形、矩形等。参照此结构，使用d3的代码添加一个箭头标记的代码如下。

对于需要添加箭头的线段，设定其marker-end属性为url(#arrow)即可添加箭头，arrow是箭头标记的id号。

3. 平面地图上的标线
下面在平面的中国地图上添加一个带箭头的标线，表示“从桂林到北京”的路径。对于平面地图上两点之间连线，用<line>元素即可。
根据两座城市的经纬度分别计算其像素坐标，并添加一个<line>，设置属性marker-end的值为url(#arrow)。
var peking = projection([116.3, 39.9]);
var guilin = projection([110.3, 25.3]);

svg.append("line")
.attr("class","route")
.attr("x1",guilin[0])
.attr("y1",guilin[1])
.attr("x2",peking[0])
.attr("y2",peking[1])
.attr("marker-end","url(#arrow)");


如此一来，标线的末尾会带一个箭头，结果如下图所示。

4. 为标线的起点添加一个圆
上面的箭头是添加到线段终点的。此外，可定义一个新的标记，添加到线段的起点。例如，起点显示一个圆。
定义一个新的标记，代码如下。


此标记的id号是startPoint，用其为线段的marker-start赋值即可。将添加线段元素的代码修改为：


结果如下图所示，标线的起点处有一个圆，终点处有一个箭头。


5. 结果
结果如本文开头的图片所示。
完整代码请单击以下链接，再右键查看源代码。
http://www.ourd3js.com/demo/G-8.0/arrow.html
本例所需的JSON文件有二：china.topojson 和 southchinasea.svg。
谢谢阅读。



文档信息

版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
发表日期：2015 年 6 月 13 日
更多内容：OUR D3.JS - 数据可视化专题站 和 CSDN个人博客

备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢