javascript - d3 位于 x 轴下方的 x 轴标签

Question

我正在尝试为我的一个 d3 图绘制一个 x 轴标签，但我在将它定位在轴本身下方时遇到了很多麻烦。这是我当前的代码:

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
     .append("text")
      .attr("x", (width / 2))
      .style("text-anchor", "middle")
      .text("Users ordered by contribution");

这是问题的屏幕截图。有快速修复方法吗？

Answer 1

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")  
      .attr("x", (width / 2))
      .attr("y", height) //set your y attribute here
      .style("text-anchor", "middle")
      .text("Users ordered by contribution");

您可以按照上面的方法为您的 svg 文本设置您的 y 位置属性