パス "d"属性を持つダイヤモンドの描画方法は？

Question

パスの「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"); 

Answer 1

ここは菱形です。なぜあなたは本当にダイヤモンドのラインが必要なのか、私はあなたの質問に楕円形の弧を持っていたのか分かりません。

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>