d3js在每个轴的末尾显示箭头

Question

如何在d3js线图中的x和y轴末尾添加箭头？

我想实现这个目标：

我在渲染方法中为我的svg添加了一个定义，但我无法弄清楚如何将它添加到正确的位置。

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

您可以在http://codepen.io/anon/pen/kLtrb

查看我的测试方案

Answer 1

Thx Lars Kotthoff的评论。它指出了正确的方向。

我查看了刻度线的图形并找到了正确的位置。我不得不将标记附加到x轴的路径而不是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)");

现在看起来像这样：