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

我將提供此鏈接供您閱讀，以便您可以更多地了解如何解決軸問題，希望對您有所幫助。

如果它不起作用，請告訴我。