如何用路径绘制钻石" d"属性?

时间:2016-06-14 16:50:53

标签: javascript angularjs d3.js svg edges

是否有人能够告诉我如何使用路径绘制钻石" d"属性?我试图将钻石附加到图形边缘的末尾。我还没有找到任何好的例子......我现在有:

                var marker = parent.append("marker")
                        .attr("id", id)
                        .attr("viewBox", "0 0 10 10")
                        .attr("refX", 11)
                        .attr("refY", 5)
                        .attr("markerUnits", "strokeWidth")
                        .attr("markerWidth", 7)
                        .attr("markerHeight", 7)
                        .attr("orient", "auto");

                    var path = marker.append("path")
                       // trying to draw a diamond here 
                        .attr("d", "M 0 0 A 200 400 30 1 0 600 200")
                        .style("stroke-width", 1)
                        .style("stroke-dasharray", "1,0")
                        .style("fill", "red")
                        .style("stroke", "black");

1 个答案:

答案 0 :(得分:2)

这是钻石形状。我不知道为什么你的问题中有一个椭圆弧,因为你只需要钻石线。

var path = d3.select("svg")
    .append("path")
    // trying to draw a diamond here 
    .attr("d", "M 50 0 100 100 50 200 0 100 Z")
    .style("stroke-width", 1)
    .style("stroke-dasharray", "1,0")
    .style("fill", "red")
    .style("stroke", "black");
html, body {
  height: 100%;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="100%" height="100%"></svg>