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

Question

这个问题与 NVD3.js multiChart x-axis labels is aligned to lines, but not bars 有关

我正在使用 NVD3.js multiChart显示 多行 和 多条在图表中。一切正常，但 x 轴标签仅与线点对齐，而不是与条对齐。我想正确对齐标签 栏杆正下方正如它应该。但我明白了:



如您所见 - x 轴(例如，2014-Feb)未与 对齐酒吧 .

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

2) 我需要 NVD3.js 的解决方案或如何正确整合。

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

谢谢!

Answer 1

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

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

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

1.2.要将线数据点与条对齐，还需要类似的移位。幸运的是，这部分很简单，因为 scatter.js(折线图使用)带有一个 padData bool 变量，它已经完成了我们想要的操作。所以基本上，我只是将 padData 设置为 true 并且线条移动以与条对齐，请参阅 here 。

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