D3js X轴标签样式向左对齐

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

我将提供此link供您阅读，以便您可以进一步了解如何解决轴问题，希望对您有所帮助。

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