D3js X axis label style justify to left

Question

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

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

Answer 1

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.