svg d3 path with arrow

by Sinh Nguyen

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

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("refX", 6)
    .attr("refY", 6)
    .attr("markerWidth", 30)
    .attr("markerHeight", 30)
    .attr("markerUnits","userSpaceOnUse")
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0 0 6 3 0 6 2 3")
    /* .attr("d", "M 6 6 0 12 6 0 12 12") */
    .style("fill", "red");
    
    // path
          svg.append("path")
          .attr("marker-end", "url(#triangle)")
          .attr("d", "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")
          .attr("stroke", "grey")
          .attr("stroke-width", "1.5")          
          .attr("fill", "transparent")
          .attr("class", "edges");
    
    //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)");