NVD3.js multiChart x轴标签对齐多行，而不是多条

Question

这个问题与NVD3.js multiChart x轴标签与线条对齐，而不是条形图有关。

我使用NVD3.js multiChart在图表中显示多行和多条。一切正常工作，但x轴标签只对齐线点，而不是条形线。我想要正确地对齐标签直接在酒吧下面的，因为它应该。但我明白了：

​

​

如您所见，-x轴(例如，2014-Feb)与条形图不对齐。

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进行适当的集成，并使一切看起来很好，需要进行一些额外的更改。我在NVD3上使用了GitHub，这样您就可以看到完整的解决方案了。当然，我们欢迎作出贡献。

Answer 3

我使用最后一个解决方案，它运行。所以，您可以指定

lines1.padData(true)

为了对齐线条。