我正在嘗試在使用d3呈現的 svg 路徑上創建方向箭頭。我使用路徑字串和svg-path-properties npm 包獲取起點。然后我將這些點推送到一個陣列，在另一個函式中，我使用d3邏輯將這些點映射到原始svg路徑上，以在每個點創建三角形。
public mapArrowPoints(): void {
this.arrowPoints.forEach((point: ArrowPointObject) => {
const path = d3.path();
path.moveTo(parseInt(point.x, 10), parseInt(point.y, 10));
path.lineTo(parseInt(point.x, 10) 8, parseInt(point.y, 10) 2);
path.lineTo(parseInt(point.x, 10) 0, parseInt(point.y, 10) 8);
path.closePath();
const svg = d3.select('svg#topLevel');
const defs = svg.insert('defs', '#curve');
const marker = defs.append('marker');
marker
.attr('id', 'triangle')
.attr('viewBox', '0 -5 10 10')
.attr('markerWidth', 4)
.attr('markerHeight', 4)
.attr('orient', 'auto')
.append('path')
.attr('d', path.toString())
.attr('fill', 'red')
.attr('stroke', 'black')
.attr('stroke-width', '3px');
svg
.select('#curve')
.attr('marker-start', 'url(#triangle)')
.attr('marker-mid', 'url(#triangle)')
.attr('marker-end', 'url(#triangle)');
});
}
現在，當我檢查瀏覽器時，我可以看到我的主要路徑，但沒有三角形。我可以檢查 DOM，并查看應該附加到svg的defs、marker、 和path。我還可以選擇標記路徑本身，并查看它應該渲染的位置（藍色框顯示三角形應該在哪里）。我不太明白為什么三角形沒有顯示。任何幫助都感激不盡。我創建了一個stackblitz 示例來試驗解決方案。
注：
我可以使三角形的路徑上出現沒有額外的defs和marker邏輯如下所示：
svg
.append("path")
.attr("d", path.toString())
.attr("stroke", "black")
.attr("stroke-width", "3px");
這顯示了三角形應該在哪里。歸根結底，這里的任務是使這些三角形利用orient: "auto"標記屬性可用的功能。如果有人知道不使用標記來定位這些三角形的方法，我愿意接受這種可能性。畢竟，我可以在沒有marker標簽的情況下渲染這些三角形，所以也許我不需要它？我在stackblitz 中包含了一個注釋掉的部分，用于試驗這種方法。
uj5u.com熱心網友回復：
除了您有許多具有相同 id 的標記元素這一事實之外，您的標記還有一個 viewBox 使三角形落在標記框之外。具有 3units 筆劃的路徑的正確 viewBox 會比它的邊界框大，所以我會使用“viewBox="18 5 14 14"”。您可能想要選擇不同的 viewBox。
在這里您可以看到要用作標記的路徑：
svg{border: solid}<svg viewBox="18 5 14 14" width="300" >
<path d="M20,7L28,9L20,15Z" fill="red" stroke="black" stroke-width="3"></path>
</svg>一旦你有了這個標記的 wiewBox，你就會看到標記，但它落在路徑之外。這是因為標記具有 refX 和 refY 屬性，參考標記將自身附加到路徑的點。默認情況下，該點為 {0,0}。我將使用 refX="18.5" refY="9"。我選擇 9 因為三角形的尖端有 y=9 (d="M20,7L28, 9 L20,15Z")
在下一個示例中，我用金色圓圈標記了這一點。您可能想要選擇不同的。
svg{border: solid}<svg viewBox="18 5 14 14" width="300" >
<path d="M20,7L28,9L20,15Z" fill="red" stroke="black" stroke-width="3"></path>
<circle cx="18.5" cy="9" r=".5" fill="gold"/>
</svg>這就是帶有標記的路徑的樣子：
<svg viewBox="0 0 700 800" >
<defs>
<marker id="triangle" viewBox="18 5 14 14" markerWidth="8" markerHeight="8" orient="auto" refX="18.5" refY="9">
<path d="M20,7L28,9L20,15Z" fill="red" stroke="black" stroke-width="3px"></path>
</marker>
</defs>
<path fill="none" stroke="black" id="curve" d="M 0.05965662,9.8756182 C 665.77394,-70.124378 654.96347,387.98451 654.96347,387.98451 L 45.773941,621.3042 650.91307,783.4508" marker-start="url(#triangle)" marker-mid="url(#triangle)" marker-end="url(#triangle)"></path>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370261.html
下一篇：試圖將“形狀”轉換為張量但失敗