如何使用nvd3在列图上定位旋转的x轴标签？ [英] How can I position rotated x-axis labels on column chart using nvd3?

问题描述

我使用nvd3的multiBarChart建立一个条形图，需要调整旋转的x轴标签的位置：

I am building a bar chart using nvd3's multiBarChart and need to adjust the position of rotated x-axis labels:

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

我希望列标签不与图表重叠，并居中在每个条下。

I would like the column labels to not overlap the chart and be centered under each bar. I could select the labels after plotting the chart and adjust them but is there an easier way?

推荐答案

我找到的最好的方法是：处理这是为了自己执行x轴刻度标签的旋转。为什么？因为NVD3没有正确处理旋转和相关的翻译。看看你的图像，你会看到，库允许旋转翻译标签从他们所代表的列的正下方。它也开始不正确地处理 axis.tickPadding（）值，等等。

The best way I have found to handle this is to perform the rotation of the x-axis tick labels yourself. Why? Because NVD3 is not handling the rotation and associated translations properly. Look at your image, and you'll see that the library allows the rotation to translate the labels out from directly under the columns they represent. It also begins to mishandle the axis.tickPadding() values, and so on.

需要做的是确保图表有足够的空间用于翻译的标签，如下所示：

The first thing that you need to do is to ensure that the chart has enough space for the translated labels, like so:

chart.margin({bottom: 60});

然后，我们可以翻译和旋转标签：

We can then translate and rotate the labels:

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

标签现在如下所示：

这篇关于如何使用nvd3在列图上定位旋转的x轴标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！