NVD3.js multiChart x轴标签与多条线对齐,但不是多条线

Question

这个问题与NVD3.js有关,multiChart x轴标签与线条对齐,但不与条线对齐

我正在使用NVD3.js 在图表中multiChart显示多行和多个条.一切正常,但x轴标签仅与线点对齐,而不是条线.我想在标尺正下方正确对齐标签.但我明白了:

如您所见 - x轴(例如,2014年 - 2月)未与Bars对齐.

1)如何同时将x轴标签与条形和线条对齐？

2)我需要这个解决方案NVD3.js或如何正确集成.

我做了jsFiddle:http://jsfiddle.net/n2hfN/28/

谢谢!

Answer 1

这里的问题是nv.models.multiChart它的x轴使用线性比例,然后当它绘制它调用的条形时nv.models.multiBar,它使用序数比例.rangeBands().

你可以通过源代码跟踪这个混乱:

首先让我们来看看 multiChart.js

这里是将x刻度设置为线性刻度的地方.

在这里,它调用nv.models.multiBar模型来创建条形图.

如果我们跳过去看看 multiBar.js

这里它创建了一个序数尺度,这里它设置了使用的尺度范围.rangeBands()

结果是用于放置条形的序数比例和用于图表轴的线性比例不对齐.如果在轴上绘制,这就是两个尺度自己的样子:

解决方案是强制图表根据条形使用的序数比例绘制折线图和x轴.这将适用于您的情况,因为条形和线条都使用相同的x轴数据.如果您制作自己的图表并且不依赖于nvd3,这很简单,正如我在此处回答您之前的问题所示.如果您尝试在nvd3中工作,这是非常复杂的,许多其他人已经尝试并且未能切换出nvd3图表使用的默认比例.例如,在2013年1月开放的nvd3 github页面上查看此问题.

我自己尝试了很多方法来重复使用条形码的顺序,但收效甚微.如果你想要四处寻找并尝试自己蛮力,我可以告诉你,从我的实验中我最接近的是chart.bars1.xScale().copy()用来制作条形图的副本,并设置它的域和rangeBands.不幸的是,由于图表的宽度是在渲染时计算的,而我似乎无法在chart.update函数中创建钩子,因此无法将rangeBands的范围设置为正确的值.

简而言之,如果您无法使用偏移的标签,您可能需要在没有nvd3的情况下编写自己的图表,或者为可视化找到不同类型的布局.

Answer 2

在使用jshanley 的答案提供的非常有用的指导玩弄 NVD3 v1.7.1 源代码之后，我想我已经设法想出了一个答案（也许更多的是杂乱而不是一个好的解决方案）。

1. 我所做的是让 x 轴标签与条形对齐，并使线数据点与条形对齐。

   1.1. 为了对齐 x 轴标签，我将 x 轴向右移动，以便第一个标签出现在第一个条形的中间下方。然后我将最后一个标签向左移动，使其出现在最后一个条形的中间下方。请参阅此处的代码。移动量是在绘图时使用.rangeBand()并保存在rbcOffset变量中计算的（我必须修改multiBar.js才能使其工作）。

   1.2. 要将线数据点与条形对齐，还需要进行类似的移位。幸运的是，这部分很简单，因为scatter.js（由折线图使用）带有一个padData布尔变量，它已经可以满足我们的需求。所以基本上，我只是设置padData为 true 并且线条移动以与条形对齐，请参见此处。

2. 为了与 NVD3 正确集成并使一切看起来不错，需要进行一些额外的更改。我在 GitHub 上 fork 了 NVD3，所以你可以在那里看到完整的解决方案。当然，欢迎投稿。