d3js display arrow at the end of each axis

Question

How can I add a Arrow at the end of the x and y axis in a d3js line diagram?

I want to achieve this:

I added a definition to my svg in the render method, but I couldn't figure out how to add it to the correct position.

svg.append("defs").append("marker")
    .attr("id", "arrowhead")
    .attr("refX", 6 + 3)
    .attr("refY", 2)
    .attr("markerWidth", 13)
    .attr("markerHeight", 9)
    .attr("orient", "right")
    .append("path")
    .attr("d", "M2,2 L2,13 L8,7 L2,2");

You can see my test scenario at http://codepen.io/anon/pen/kLtrb

Answer 1

Thx Lars Kotthoff for your comment. It pointed me to the right direction.

I had a look at the graph where the ticks are and found the right place. I had to append the marker to the path of the x axis not the x axis group.

var xa = svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")      
  .style("dominant-baseline", "central")
  .call(xAxis);

xa.select("path").attr("marker-end", "url(#arrowhead)");

Now it looks like this: