[英]Drawing arrows using d3
在這個小提琴中,我試圖畫一個箭頭:
var svgContainer = d3.select("body").append("svg")
.attr("width", 1200)
.attr("height", 1200)
.attr("text-align" , "center");
var arrowStartPosition = 5
var arrowSpacing = 60
var verticalStrokeColor = "black"
var arrowYStartPosition = 5
var arrowYEndStartPosition = 150
var margin = 150;
var labelLine = svgContainer.append("line")
.attr("x1", arrowStartPosition + margin)
.attr("y1", arrowYStartPosition)
.attr("x2", arrowStartPosition + margin)
.attr("y2", arrowYEndStartPosition)
.attr("stroke-width", 2)
.attr("stroke", verticalStrokeColor);
var right = svgContainer.append("line")
.attr("x1", arrowStartPosition + margin)
.attr("y1", arrowYStartPosition)
.attr("x2", 20 + margin)
.attr("y2", 20)
.attr("stroke-width", 2)
.attr("stroke", "black");
var left = svgContainer.append("line")
.attr("x1", right.attr("x1")-15)
.attr("y1", right.attr("y1")+15)
.attr("x2", 5 + margin)
.attr("y2", 5)
.attr("stroke-width", 2)
.attr("stroke", "black");
為了嘗試保持代碼通用,我試圖根據 right 的位置繼續繪制箭頭的左側部分:
.attr("y1", right.attr("y1")+15)
但正如在 fiddle 中可以看到的:
https://jsfiddle.net/Qh9X5/3447/
箭頭未正確繪制。
我認為這是因為在right.attr("y1")
未初始化right.attr("y1")
值?
任何關於實現相同結果的更優雅方法的指針都表示贊賞。
不需要 JavaScript! 使用 SVG <marker/>
:
<svg>
<defs>
<marker id="arrow-head" markerWidth="13" markerHeight="13" refx="5" refy="5" orient="auto">
<path d="M0,0 L0,10 L10,5 L0,0" style="fill: #000000;" />
</marker>
</defs>
<path d="M0,0 L10,20 L20,50 L30,30 L40,40 L50,50" style="stroke: #000000; stroke-width: 1px; fill: none; marker-end: url(#arrow-head);"/>
</svg>
如果您要根據右側的位置定義左側的位置,則唯一需要更改的值是x2
。
var left = svgContainer.append("line")
.attr("x1", right.attr("x1"))
.attr("y1", right.attr("y1"))
.attr("x2", right.attr("x2")-30)
.attr("y2", right.attr("y2"))
.attr("stroke-width", 2)
.attr("stroke", "black");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.