D3 SVG marker

HTML

<div id="main">
    <svg width="200" height="200">
        <defs>
            <marker id="arrow" refX="4" refY="2.5" markerWidth="5" markerHeight="5" orient="auto">
                <path d="M0,0 L5,2.5 L0,5 Z" class="arrow"></path>
            </marker>
        </defs>
        <path d="M50,50 L150,150" style="marker-end: url(#arrow);"></path>
    </svg>
</div>

CSS

#main {
    width: 200px;
    height: 200px;
}
svg path {
    fill: green;
    stroke: #444;
    stroke-width: 2px;
}
svg marker path {
    stroke: none;
    fill: pink;
}
}

JavaScript

/*
svg = d3.select("#main").append("svg")
    .attr("width", 200)
    .attr("height", 200)
;

svg.append('svg:defs').append('svg:marker')
	.attr('id', 'arrow')
    .attr('refX', 11.5)
	.attr('refY', 2.5)
	.attr('markerWidth', 5)
	.attr('markerHeight', 5)
	.attr('orient', 'auto')
	.append('svg:path')
	.attr('d', 'M0,0 L5,2.5 L0,5 Z')
	.attr("class", "arrow")
;


svg.append('svg:path').append('svg:marker")
	.style("marker-end", "url(#arrow)")
    .attr("d", "M50,50 L150,150")
;*/