我怎么能位置旋转柱图上x轴标签使用nvd3？(How can I position rotated

我使用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添加“‘＃’+数据筒+“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);
}

文章来源: How can I position rotated x-axis labels on column chart using nvd3?