D3js X axis label style justify to left

user_11487250 0
Viewed 279

Is there a way to justify the text in the X axis to the left? I've tried with .attr("text-anchor", "middle") .attr("text-anchor", "end") .attr("text-anchor", "start") but nothing works, I also tried with css but nothing works.

this is how my X axis looks like

enter image description here

and this is the part of the code that ads the x labels 

// Add X axis
var x = d3.scaleBand()
    .domain(groups)
    .range([0, width])
    .padding([0.5]);
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("text-anchor", "middle")
    .attr("font-size", "55px")
    .attr("y", "-7")
    .attr("x", "-45")
    .attr("transform", "rotate(-90)");
d3.js javascript
1 Answers

I don't know if I understood your question properly but it seems you want the x axis text closest to the axis itself am I right? If that's the question I think your problem is related to the text-anchor atribute. I would sugest writing .style instead of .attr so the code would look something like this:

.style("text-anchor", "end")

I'll provide this link for you to read so you can understand a bit more how to fix the axis problem and I hope it helps.

If it doesn't work, please let me know.

user_116013780
Related