D3js X 轴 label 样式左对齐

Question

有没有办法让 X 轴上的文本向左对齐？ 我试过.attr("text-anchor", "middle") .attr("text-anchor", "end") .attr("text-anchor", "start")但没有任何效果，我也尝试使用 css 但没有任何效果。

这就是我的 X 轴的样子

这是广告 x 标签的代码部分

// 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

我不知道我是否正确理解了您的问题，但似乎您希望 x 轴文本最接近轴本身，对吗？ 如果这是我认为您的问题与text-anchor属性有关的问题。 我建议编写.style而不是.attr ，这样代码看起来像这样：

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

我将提供此链接供您阅读，以便您可以更多地了解如何解决轴问题，希望对您有所帮助。

如果它不起作用，请告诉我。