在 d3 中旋轉 x 軸文本

Question

我是 d3 和 svg 編碼的新手，正在尋找一種在圖表的 xAxis 上旋轉文本的方法。 我的問題是 xAxis 標題通常比條形圖中的條寬。 所以我希望旋轉文本以在 xAxis 下方垂直（而不是水平）運行。

我已經嘗試添加轉換屬性： .attr("transform", "rotate(180)")

但是當我這樣做時，文本完全消失了。 我試過增加 svg 畫布的高度，但仍然無法查看文本。

關於我做錯了什么的任何想法都會很棒。 我還需要調整 x 和 y 位置嗎？ 並且，如果是這樣，多少（當我在 Firebug 中看到它時很難進行故障排除）。

Answer 1

如果您設置了 rotate(180) 的變換，它會相對於原點旋轉元素，而不是相對於文本錨點。 因此，如果您的文本元素還設置了x和y屬性來定位它們，則很可能您已將文本旋轉到屏幕外。 例如，如果您嘗試過，

<text x="200" y="100" transform="rotate(180)">Hello!</text>

文本錨點將在⟨-200,100⟩。 如果您希望文本錨點保持在⟨200,100⟩，那么您可以在旋轉之前使用變換來定位文本，從而改變原點。

<text transform="translate(200,100)rotate(180)">Hello!</text>

另一種選擇是將可選的cx和cy參數用於 SVG 的旋轉變換，以便您可以指定旋轉的原點。 這最終有點多余，但為了完整性，它看起來像這樣：

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>

Answer 2

從別處無恥地采摘，所有功勞都歸功於作者。

包含的邊距僅用於顯示應增加的底部邊距。

var margin = {top: 30, right: 40, bottom: 50, left: 50},

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis)
     .selectAll("text")  
     .style("text-anchor", "end")
     .attr("dx", "-.8em")
     .attr("dy", ".15em")
     .attr("transform", "rotate(-65)");

Answer 3

這種旋轉 D3 軸標簽的一個問題是每次渲染軸時都必須重新應用此邏輯。 這是因為您無權訪問軸用於呈現刻度和標簽的輸入-更新-退出選項。

d3fc 是一個組件庫，它具有裝飾模式，允許您訪問組件使用的底層數據連接。

它具有 D3 軸的替代品，其中軸標簽旋轉執行如下：

var axis = fc.axisBottom()
  .scale(scaleBand)
  .decorate(function(s) {
    s.enter()
        .select('text')
        .style('text-anchor', 'start')
        .attr('transform', 'rotate(45 -10 10)');
  });

請注意，旋轉僅應用於輸入選擇。

您可以在軸文檔頁面上看到此模式的其他一些可能用途。