如何使用 nvd3 在柱形图上定位旋转的 x 轴标签?

Posted

技术标签:

【中文标题】如何使用 nvd3 在柱形图上定位旋转的 x 轴标签?【英文标题】:How can I position rotated x-axis labels on column chart using nvd3? 【发布时间】:2012-10-19 16:08:44 【问题描述】:

我正在使用 nvd3 的 multiBarChart 构建条形图,需要调整旋转 x 轴标签的位置:

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

我希望列标签不与图表重叠并在每个条形下方居中。我可以在绘制图表后选择标签并调整它们,但有没有更简单的方法?

【问题讨论】:

在询问时必须说做得很好...确实帮助我解决了类似的问题。谢谢! 【参考方案1】:

有一个 css 替代品。

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

【讨论】:

【参考方案2】:

以下内容对我有用:

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

【讨论】:

【参考方案3】:

无论你的文本旋转是给开始/中间/结束

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

【讨论】:

【参考方案4】:

这对我有用。我提交此内容的主要原因是更改锚点比手动转换位置更好。

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

【讨论】:

轻微建议更改xTicks.style( 'text-anchor': (function() var anchor; .... )());【参考方案5】:

对于多图,您可以在 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 的回答。

【讨论】:

请注意,您可以(并且应该)对任何其他图表类型执行此操作。指定您正在操作的特定 D3 容器是个好主意,尤其是在涉及多个图表的情况下。【参考方案6】:

我发现处理此问题的最佳方法是自己执行 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)' ) ;

标签现在看起来像这样:

【讨论】:

谢谢。你应该在哪里做?我有几个图表,如果我按照你说的那样做,它只适用于第一个图表。也许有一些竞争条件,当我确定图表完成绘制时,我只需要旋转标签。知道怎么知道吗? 您需要找到一种同时选择所有 xTicks 的方法(通过将 '.nv-x.nv-axis >g' 选择器更改为合理的值),但这可能很难。您可能必须为每个人都这样做,依次选择他们的 xTicks。确保为每个图表提供自己的类/ID,以便您可以轻松选择它们。 为一个类似的问题苦恼了好几个小时......这真的成功了......谢谢!

以上是关于如何使用 nvd3 在柱形图上定位旋转的 x 轴标签?的主要内容,如果未能解决你的问题,请参考以下文章

如何在柱状图中添加折线图

如何在JSP中实现柱形图 [

excel柱形图上如何显示百分比和数值

柱状图怎么显示数字

excel柱形图上怎么体现数字

如何利用Python中的Pandas库绘制柱形图