How to draw line with arrow using d3.js

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.

<!DOCTYPE html>
    <html>
    <head>
    <title>Drawing line with arrow at the end</title>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
    <script type='text/javascript'>
    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)");


            </script>
            </body>
    </html>