如何在圓弧路徑元素的兩端獲取箭頭？

我正在使用d3.svg.arc（）繪製一個圓的一部分，將內部和外部半徑設置爲相同並具有一些隨機的掃掠角度。現在我想在它的兩端都有箭頭。 marker-start屬性工作正常。但問題在於標記結束。當我運行代碼時，我在開始時就獲得了兩個標記。請幫助我。如何在圓弧路徑元素的兩端獲取箭頭？

<svg version="1.1"> 
<defs> 
    <marker id="endtriangle" 
    viewBox="0 0 10 10" refX="0" refY="5" 
    markerUnits="strokeWidth" 
    markerWidth="4" markerHeight="3" 
    orient="auto"> 
    <path d="M 0 0 L 10 5 L 0 10 z" /> 
    </marker> 
    <marker id="starttriangle" 
    viewBox="0 0 10 10" refX="5" refY="5" 
    markerUnits="strokeWidth" 
    markerWidth="4" markerHeight="3" 
    orient="auto"> 
    <path d="M -2 5 L 8 0 L 8 10 z" /> 
    </marker> 
</defs> 
</svg> 
<script type="text/javascript"> 
var arc=d3.svg.arc() 
    .innerRadius(140) 
    .outerRadius(140) 
    .startAngle(0) 
    .endAngle(Math.PI/3) 
d3.select("svg").append("path") 
     .attr("d",arc) 
     .attr("transform","translate(200,200)") 
     .attr("stroke","black") 
     .attr("marker-end","url(#endtriangle)") 
     .attr("marker-start","url(#starttriangle)") 
     .attr("fill","none") 
     .attr("stroke-width","10") 
     .attr("id","dimen") 
</script> 
</body>

來源

2013-07-08 charan

你能顯示你的svg文件的相關部分嗎？ – orique

用代碼更新了問題。 – charan

這似乎是因爲D3生成的弧路徑並不直接適用於這種用例。

下面是我從刪除有關所產生的電弧路徑數據（d屬性）的一半得到了一個例子：http://jsfiddle.net/MQNXZ/

頂部路徑使用你的榜樣，底部一個一個清理靜態版本。與D3路徑數據相比，差異在於D3變體包含附加的直線命令，多個弧命令和關閉路徑命令。

來源

2013-07-08 11:58:14

謝謝你。但你是如何獲得路徑座標？另外，如果我們想要繪製多個弧段，該怎麼辦？我們無法明確計算和改變其他每個細分市場的路徑。 – charan

從檢查/複製d3.arc輸出中獲得，無論如何，如果要生成更接近靜態輸出的弧路徑，只需添加類似於內置d3.arc對象的東西，即https://github.com/ mbostock/D3 /斑點/主/ SRC/SVG/arc.js。切掉大約一半的弧形路徑生成器代碼，以匹配我的小提琴中的靜態版本。 –

我是新來的編碼。你可以請更新jsfiddle中的代碼??謝謝！ – charan

如何在圓弧路徑元素的兩端獲取箭頭？

回答

相關問題