score:18

Accepted answer

Change your marker creation to the following:

svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0 -5 10 10")
    .style("stroke", "black");

Once you do this, you'll see a line being drawn. You may want to use fill instead of stroke if you want a filled in arrow, which you can get by using the following code:

svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .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");

Related Query

More Query from same tag