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

Question

我正在使用nvd3的multiBarChart構建條形圖，需要調整旋轉的x軸標簽的位置：

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

我希望列標簽不與圖表重疊並在每個條形圖下居中。 我可以在繪制圖表后選擇標簽並調整它們但是有更簡單的方法嗎？

Answer 1

我發現處理這個問題的最好方法是自己執行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)' }) ;

標簽現在看起來像這樣：

Answer 2

對於多圖，您可以在d3.select中添加“ '＃'+ containerId +'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回答。

Answer 3

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

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;
});

Answer 4

以下對我有用：

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

Answer 5

無論文本旋轉是什么，都要給出開始/中間/結束

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

Answer 6

有一個css替代品。

.nv-x .tick text {
    transform: rotate(-90deg) translateX(-15px) translateY(-7px);
}