[英]How to adjust arrow according to circle size?
我用d3js創建了一個網絡圖。 我有不同半徑的圓。 圓圈之間的每條線都有一個指向其來源的箭頭。 如何根據圓半徑適當調整箭頭標記?
這是jsfiddle中該代碼的鏈接http://jsfiddle.net/2NJ25/10/
這就是我將箭頭附加到行上的方法
svg.append("defs").append("marker")
.attr("id", "arrow")
.attr("refX", 10)
.attr("refY", 2.2)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,0 V4 L5,2 Z10");
您可以調整鏈接。 這將調整附加到它的箭頭的大小。
var links = svg.append("g").selectAll("line.link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) {
return (d.target.cRadius) / 5; })
.attr("marker-end", "url(#arrow)");
我注意到您的標記路徑存在錯誤。 這是我使用的一個:
svg.append("defs").append("marker")
.attr("id", "arrow")
.attr("viewBox", "0 -5 10 10")
.attr("refX", 21)
.attr("refY", 0)
.attr("markerWidth", 5)
.attr("markerHeight", 5)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
完整的代碼在這里:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.