如何使用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

有一种替代方案。

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