javascript - 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供您阅读，以便您可以更多地了解如何解决轴问题，希望对您有所帮助。

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