title: d3 svg how to create a polyline with an arrow at the end
body: <p>I am trying to add an arrow at the end of a <code>polyline</code> but it scales incorrectly. I am relatively new to d3 and svg so I hope some can figure out how to do this:</p>
  
  <p><a href="https://jsfiddle.net/bbbb4gdL/" rel="nofollow noreferrer">JS Fiddle</a></p>
  
  <pre><code>    var w = 300;
      var h = 300;
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
  
      //arrow
      svg.append("svg:defs")
          .append("svg:marker")
          .attr("id", "arrow")
          .attr("refX", 6)
          .attr("refY", 6)
          .attr("markerWidth", 30)
          .attr("markerHeight", 30)
          .attr("orient", "auto")
          .append("path")
          .attr("d", "M 0 0 12 6 0 12 3 6")
          .style("fill", "black");
  
  
      //line              
      svg.append("line")
        .attr("x1", 100)
        .attr("y1", 100)
        .attr("x2", 200)
        .attr("y2", 100)
        .attr("stroke-width", 1)
        .attr("stroke", "black")
        .attr("marker-end", "url(#arrow)");
  
      // polyline
      svg.append("polyline")
          .attr("fill", "none")
          .attr("stroke", "blue")
          .attr("stroke-width", "2")
          .attr("points", "05,05 15,05 15,15 25,15 25,25 35,25")
          .attr("marker-end", "url(#arrow)");
  </code></pre>