CODEWITHSUNDEEP
javascriptcssd3.js
sir_thursday
sir_thursday

Reputation: 5409

d3 x-axis label positioned below the x-axis

I'm trying to draw an x-axis label for one of my d3 graphs, and I'm having a lot of trouble positioning it below the axis itself. Here is my current code:

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

And here is a screenshot of the problem. Is there a quick fix?

enter image description here

Upvotes: 0

Views: 1656

Answers (1)

jhyap
jhyap

Reputation: 3837

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

You can set your y position attribute for your svg text as per above

Upvotes: 2

Related Questions