javascript - d3js mostrar flecha al final de cada eje

¿Cómo puedo añadir una flecha al final de los ejes x e y en un diagrama de líneas d3js?

Quiero lograr esto:

Agregué una definición a mi SVG en el método de renderizado, pero no pude averiguar cómo agregarla en la posición correcta.

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");

Puedes ver mi escenario de prueba en http://codepen.io/anon/pen/kLtrb

Respuesta #1

Gracias Lars Kotthoff por tu comentario. Me indicó la dirección correcta.

Eché un vistazo al gráfico donde están las marcas y encontré el lugar correcto. Tuve que añadir el marcador a la ruta del eje x, no al grupo del eje x.

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)");

Ahora se ve así: