【 D3.js 高级系列 — 8.0 】标线

最新推荐文章于 2024-07-17 14:46:11 发布

DecemberCafe

最新推荐文章于 2024-07-17 14:46:11 发布

阅读量4.6k

点赞数

分类专栏： D3.js D3 数据可视化 - 高级系列文章标签： d3 地图标线箭头标记

本文链接：https://blog.csdn.net/lzhlzz/article/details/46480447

版权

本文介绍了如何使用D3.js在地图上绘制标线并添加箭头，详细讲解了线段元素<line>和路径元素<path>的使用，以及如何通过SVG标记定义箭头和起点的圆形标记。示例展示了从桂林到北京的带箭头标线，起点带有圆点。

摘要由CSDN通过智能技术生成

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

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"