更改x軸的瀑布圖示例文本方向

我試圖在定向瀑布圖例如http://dimplejs.org/advanced_examples_viewer.html?id=advanced_waterfall 更改x軸的瀑布圖示例文本方向

通過How to rotate x-axis text in dimple.js?在控制檯啓發了上述網頁我注入x軸的文字：

myChart.axes[0].shapes.selectAll("text").attr("transform", "rotate(-45)");

導致：

enter image description here

如可以看到的軸線旋轉，但是噸繼承人職位已被翻譯。

我的特定使用情況下，可以看出：

enter image description here

有多個類別和軸線文本需要旋轉，以防止溢出。我將如何旋轉軸文本（在我的情況下，我想-90度而不是-45），並防止產生的位置轉換？

在dimplejs網站實例的情況下，我可以做

myChart.axes[0].shapes.selectAll("text") 
    .attr("transform", "translate(-150, 200) rotate(-90)")

手動對齊文本：

enter image description here

我與多個類別的特定圖表我需要做的：

myChart.axes[0].shapes.selectAll("text") 
    .attr("transform", "translate(-130, 140) rotate(-90)")

一個令人討厭的黑客攻擊需要根據數據手動更改。

來源

2014-07-17 jdharrison

您是否試過圍繞'text'元素的中心而不是座標原點旋轉？ –

@LarsKotthoff我已經嘗試了旋轉，然後相對於父母邊界框'this.parentNode.getBBox（）'進行翻譯，這似乎變得非常接近我的用例（-90旋轉）。 – jdharrison

好吧，在我看來，你真正想在這種情況下是改變旋轉點。 –

這個問題是特定於我做瀑布圖的例子。 Dimple對長標籤進行了旋轉構建，如調整彈出窗口的大小，您可以在this example中看到。

不幸的是，爲了處理重複的x值，我在瀑布示例中創建了x尺寸，該尺寸需要一個整數，然後在繪製之後將其替換爲文本標籤。這意味着大小調整邏輯認爲只有一個數字的整數並且不執行旋轉。以下是用於旋轉x值的凹坑來源的代碼：

axis.shapes.selectAll("text") 
    .style("text-anchor", "end") 
    .each(function() { 
     var rec = this.getBBox(); 
     d3.select(this) 
      .attr("transform", "rotate(90," + (rec.x + rec.width) + "," + (rec.y + (rec.height/2)) + ") translate(5, 0)"); 
    });

來源

2014-07-17 12:28:15

謝謝@John Kiernander完美的作品。大圖書館非常直觀。 – jdharrison

更改x軸的瀑布圖示例文本方向

回答

相關問題