如何使用nvd3在柱形圖上定位旋轉的x軸標籤？

我建立使用nvd3的multiBarChart條形圖和需要調整旋轉x軸標籤的位置：如何使用nvd3在柱形圖上定位旋轉的x軸標籤？

enter image description here

var chart = nv.models.multiBarChart(); 
... 
chart.rotateLabels(-90);

我想列標籤不重疊圖表和居中在每個酒吧下。我可以在繪製圖表後選擇標籤並調整它們，但有沒有更簡單的方法？

來源

2012-10-30 David Tinker

我發現處理此問題的最佳方法是自行執行x軸刻度標籤的旋轉。爲什麼？因爲NVD3沒有正確處理旋轉和相關翻譯。看看你的圖片，你會發現圖書館允許旋轉將標籤從他們代表的列下直接翻譯出來。它也開始錯誤地處理axis.tickPadding()值，等等。

，你需要做的第一件事是要確保該圖表有翻譯的標籤足夠的空間，就像這樣：

chart.margin({bottom: 60});

然後，我們可以平移和旋轉標籤：

var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g'); 
xTicks 
    .selectAll('text') 
    .attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;

標籤現在這個樣子：

Rotated/translated labels

來源

2012-11-20 11:38:33 River

感謝。你應該怎麼做？我有幾個圖表，如果我像你說的那樣對待你，它只適用於第一張圖表。也許有一些競爭條件，我只需要旋轉標籤，當我確定圖表完成繪圖。任何想法如何知道這一點？ – huyz

您需要找到同時選擇所有xTicks的方法（通過將'.nv-x.nv-axis> g'選擇器更改爲合理的選項），但這可能很困難。你可能必須爲每一個做這個，依次選擇他們的xTicks。確保您爲每個圖表分配自己的類別/ ID，以便您可以輕鬆選擇它們。 – River

感謝這對我工作 –

對於多圖，您可以在d3.select添加「'＃' +數據筒+'SVG」象下面這樣：

//Rotate x-axis label 
var xTicks = d3.select('#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g'); 
xTicks 
    .selectAll('text') 
    .attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });

不管怎麼說，謝謝@River答案。

來源

2013-12-05 06:59:47 Simon

只是一個說明，你可以（也應該）爲任何其他圖表類型。指定您正在操作的特定D3容器是一個好主意，特別是在涉及多個圖表的情況下。 –

這對我有效。我提交的主要原因是改變錨點比手動翻譯位置更好。

var xTicks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text'); 
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ; 
xTicks.attr('text-anchor',function() { 
    var anchor; 
    if(angle > 0){ anchor = 'start'; } 
    else if(angle < 0){ anchor = 'end'; } 
    else { anchor = 'middle'; } 
    return anchor; 
});

來源

2014-06-04 18:03:55

稍微建議改變'''xTicks.style（{'text-anchor'：（function（）{var anchor; ....}）（）}）;''' – user25064

無論你的文本旋轉給開始/中間/結束

d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start'); //start/middle/end

來源

2014-12-11 05:23:10 Rayiez

以下爲我工作：

chart.axislist["xAxis"]["rotateLabels"]= -45

來源

2016-05-26 09:04:15

如何使用nvd3在柱形圖上定位旋轉的x軸標籤？

回答

相關問題