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

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

• javascript
• svg
• d3.js

• 1 This is non-trivial because the axis line path actually includes the start and end ticks. You'd need to remove that path and add a new one in the same position with the arrow. – Lars Kotthoff Commented Oct 31, 2014 at 10:06

1 Answer 1

Thx Lars Kotthoff for your ment. 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: