Question

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

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轴属性，也可以在这些案例块内部进行更改。

但如果您仍想从前端修改，可以使用d3选择dom元素，如

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

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

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

1 个答案: