title: How to draw line with arrow using d3.js
body: <p>I have trouble in drawing the line with arrow using d3.js. I did see some tutorials and wrote this code, but I just see the line with no arrow mark. Could anyone please look at it and tell me where am I missing. Thanks in advance.</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", "triangle")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto");
  
  //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(#triangle)");
  </code></pre>