如何在圆弧路径元素的两端获取箭头？

我正在使用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

如何在圆弧路径元素的两端获取箭头？

回答

相关问题