如何在 nvd3 图表中旋转到 Y 轴标签

【问题标题】：How to rotate to Y axis label in nvd3 chart如何在 nvd3 图表中旋转到 Y 轴标签
【发布时间】：2017-05-07 14:25:48
【问题描述】：

我在 nvd3 中有一个多图表。我需要旋转 yAxis1 和 yAxis2 的 y 轴标签。但我发现旋转 y 轴标签没有好的选择。对于旋转 xAxis 标签，它非常简单。只需 uisng rotateLabels: 45 适用于 xAxis。但对于 y 轴，此解决方案不起作用。我尝试在 yAxis:{} 中使用 rotateLabels，如下所示：

rotateLabels: 45

它适用于 x 轴。但它不适用于 y 轴。我也尝试过使用像

这样的css命令

css:{'transform':'rotate(45)'}

但根本没有任何效果。我想不出任何其他解决方案。

任何人对我有任何想法，我怎样才能在 nvd3 图表中死记硬背 y 轴标签？提前致谢

【问题讨论】：

根据 nvd3 的文档，rotateLabels 仅适用于 X 轴。试试 CSS 属性css : { 'transform': 'rotate(45deg)'}
它也不起作用

标签： nvd3.js angular-nvd3

【解决方案1】：

您不能像这样从图表选项中旋转 y 轴标签。您可以通过在库中进行少量修改来做到这一点。转到nvd3.js 代码。并找到开关块

 switch (axis.orient()) {}

你会在这个区块内找到

case 'top':
case 'bottom':
case 'right':
case 'left':

这里 case 'left' 和 case 'right' 用于 y 轴。所以进入这些案例并找到：

axisLabel .style('text-anchor', rotateYLabel ? 'middle' : 'begin') .attr('transform', rotateYLabel ? 'rotate(90)' : '') 现在把rotate(45) 替换为rotate(90)，你就准备好了。如果您想更改其他 y 轴属性，您也可以在这些案例块内进行更改。

但是如果你仍然想从前端进行修改，你可以使用 d3 like 选择 dom 元素

d3.select(".nv-y2").select(".nvd3").select("text").attr("transform","rotate(45)");

上述任何一种策略都应该有效。

【讨论】：