【 D3.js 高級系列 — 8.0 】 標線

有時候，需要在地圖上繪製連線，表示“從某處到某處”的意思，這種時候在地圖上繪製的連線，稱爲“標線”。

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 ，轉載請註明出處，謝謝