javascript 如何使用 nvd3 在柱形图上定位旋转的 x 轴标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13136964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I position rotated x-axis labels on column chart using nvd3?
提问by David Tinker
I am building a bar chart using nvd3's multiBarChart and need to adjust the position of rotated x-axis labels:
我正在使用 nvd3 的 multiBarChart 构建条形图，需要调整旋转 x 轴标签的位置：
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?
我希望列标签不与图表重叠并在每个条形下方居中。我可以在绘制图表后选择标签并调整它们，但有更简单的方法吗？
回答by River
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.
我发现处理这个问题的最好方法是自己执行 x 轴刻度标签的旋转。为什么？因为 NVD3 没有正确处理旋转和相关的平移。查看您的图像，您会看到该库允许旋转将标签从它们所代表的列正下方平移出来。它也开始错误地处理这些axis.tickPadding()值，等等。
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)' }) ;
The labels now look like this:
标签现在看起来像这样：
回答by Simon
For multiple graph, your can add "'#' + containerId + ' svg" in the d3.selectlike below:
对于多图，您可以在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)' });
Anyways, Thanks for @River answer.
无论如何，感谢@River 的回答。
回答by Gordon Siegfriedt
This worked for me. The main reason I'm submitting this is that changing the anchor is nicer than translating the position manually.
这对我有用。我提交这个的主要原因是更改锚点比手动翻译位置更好。
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;
});
回答by Eric Jodet
The following worked for me:
以下对我有用：
chart.axislist["xAxis"]["rotateLabels"]= -45
回答by Rodris
There is a css alternative.
有一个 css 替代方案。
.nv-x .tick text {
transform: rotate(-90deg) translateX(-15px) translateY(-7px);
}
回答by Rayiez
Whatever you text rotation is give start/middle/end
无论你的文本旋转是给开始/中间/结束
d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start'); //start/middle/end
