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

Question

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

rotateLabels: 45

它适用于 x 轴。但它不适用于 y 轴。我还尝试使用 css 命令，例如

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

但一点作用都没有。我想不出任何其他解决方案。

有谁知道我怎样才能在 nvd3 图表中记下 y 轴标签？提前致谢

Answer 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(90) 代替 rotate(45) 就可以了。如果你想改变其他 y 轴属性你也可以在这些 case 块内改变。

但是如果你仍然想从前端修改你可以 select dom 元素使用 d3 像

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

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

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

How to rotate to Y axis label in nvd3 chart

nvd3.js

angular-nvd3