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

Question

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

我想实现这个:

我在 render 方法中为我的 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

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

现在看起来像这样: