2

私は d3.svg.arc() を使用して、内側と外側の半径を同じにし、ランダムなスイープ角度で円のセグメントを描画しています。そして今、私はその両端に矢頭をつけたいと思っています。マーカー開始プロパティは正常に機能しています。しかし、問題はマーカーエンドにあります。コードを実行しているとき、開始時に両方のマーカーを取得しています。私を助けてください。

<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>
4

1 に答える 1

1

これは、D3 がこのユース ケースに直接適していないアーク パスを生成するためと思われます。

d生成されたアーク パス データ (属性)の約半分を削除して得た例を次に示します: http://jsfiddle.net/MQNXZ/

上のパスはあなたの例を使用しており、下のパスはクリーンアップされた静的バージョンです。D3 パス データとの違いは、D3 バリアントには追加の直線コマンド、複数の円弧コマンド、およびパスを閉じるコマンドが含まれていることです。

于 2013-07-08T11:58:14.357 に答える