2

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

1 回答 1

1

这似乎是因为 D3 生成的弧路径并不直接适合此用例。

这是我从删除大约一半生成的弧路径数据（d属性）中得到的一个示例：http: //jsfiddle.net/MQNXZ/

顶部路径使用您的示例，底部路径是清理后的静态版本。与 D3 路径数据相比的不同之处在于，D3 变体包括一个附加的直线命令、几个圆弧命令和一个闭合路径命令。

于 2013-07-08T11:58:14.357 回答