【问题标题】:nvd3.js x-axis not rotating all tick labels after chart re-render图表重新渲染后,nvd3.js x 轴不旋转所有刻度标签
【发布时间】:2016-08-20 16:10:05
【问题描述】:
我有一个 nvd3 图表,我在其中按天、周或月对数据进行分组。当我在 x 轴上有少量值时,我不会旋转轴标签,但如果我有更多的刻度,我会旋转它们,这样它们就不会重叠。
我的问题是,当我有一个按周分组的图表并旋转刻度标签并将其更改为按月分组时,大多数标签按预期变为水平,除了一个。如果我玩日期,我发现我总是在 2016 年 2 月或 2014 年 12 月遇到问题。
如果我从天分组按月分组,或者如果我刷新页面,图表将按预期显示。
请参阅下面的图片:
chart by week,
chart by month
有人知道我为什么会遇到这种问题吗?
【问题讨论】:
标签:
d3.js
axis
nvd3.js
rotatetransform
【解决方案1】:
好吧,我找到了解决问题的方法。
在 nv.models.axis 的轴图表函数中的文件 nv.d3 中有一个 if 语句,当标签设置为旋转时运行(if (rotateLabels % 360){...})。但是,如果标签未设置为旋转,则没有代码可以显式设置它,所以我在该 if 语句中添加了一个 else 语句来对问题进行排序:
else {
xTicks
.attr('transform', 'rotate(0)')
.style('text-anchor', 'middle');
}