有时,需要在地图上画线。代表“从地方到什么地方”的含义,因此,在连接的映象绘制时。称为“打标”。
1. 标线是什么
标线。是指地图上须要两个坐标以上才干表示的元素。
比如,北京和上海之间连线。用于绘制标线的图形元素有两种:线段元素<line>和路径元素<path>。
假设是在平面地图上。且不要求两点之间有曲线,<line>已足够。假设是在球面地图上,或对于平面地图上的曲线,则需使用<path>。
标线有时带有箭头。表示方向。
2. 怎样加入带箭头的标线
假设须要表示标线的方向,则能够在末端加箭头。【进阶 - 第 4.0 章】。提到了给SVG定义标记,从而为<line>或<path>加入箭头的方法。箭头的标记例如以下:
<defs>
<marker id="arrow"
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的代码加入一个箭头标记的代码例如以下。
var defs = svg.append("defs"); var arrowMarker = defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","12")
.attr("markerHeight","12")
.attr("viewBox","0 0 12 12")
.attr("refX","6")
.attr("refY","6")
.attr("orient","auto"); var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2"; arrowMarker.append("path")
.attr("d",arrow_path)
.attr("fill","#000");
对于须要加入箭头的线段。设定其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. 为标线的起点加入一个圆
上面的箭头是加入到线段终点的。此外。可定义一个新的标记,加入到线段的起点。
比如,起点显示一个圆。
定义一个新的标记。代码例如以下。
var startMarker = defs.append("marker")
.attr("id","startPoint")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","12")
.attr("markerHeight","12")
.attr("viewBox","0 0 12 12")
.attr("refX","6")
.attr("refY","6")
.attr("orient","auto"); startMarker.append("circle")
.attr("cx",6)
.attr("cy",6)
.attr("r",2)
.attr("fill","#000");
此标记的id号是startPoint,用其为线段的marker-start赋值就可以。将加入线段元素的代码改动为:
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)") //终点处加入箭头
.attr("marker-start","url(#startPoint)"); //起点处加入圆
结果例如以下图所看到的。标线的起点处有一个圆,终点处有一个箭头。
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 。转载请注明出处。谢谢
版权声明:本文博主原创文章,博客,未经同意不得转载。