javascript - 如何强制 nvd3 显示与 graph-nvd3 上绘制的值相同的刻度数

Question

如何强制 nvd3 图形显示一定数量的刻度，例如，请在下面的图形图像中找到:

如下所示，我将 7 个值推送到包含一周 7 天的数组。但是看起来它们的刻度数比实际值多。我正在寻找的是与此类似的东西:http://nvd3.org/examples/line.html然而，当我将鼠标悬停在这些刻度上时，它们未对齐，如图所示:

那是图表线应该在的地方，也就是悬停的刻度显示工具提示的地方。但由于某种原因，我没有显示 7 个刻度，而是显示了 10 个刻度，所有悬停的工具提示都没有对齐。我还试图强制 nvd3 到有特定的刻度数但没有用。

                chart2.xAxis
                .ticks(7)
                .tickFormat(function(d) {
                    return d3.time.format.utc('%b %d')(new Date(d));
                });

这是 fiddle :http://jsfiddle.net/86hr7h1s/4/理想情况下，我应该在图表上显示 7 天和 7 个刻度，而不是在图表上显示重复的天数和 10 个刻度。任何想法出了什么问题以及如何纠正这个问题？

编辑::::::

我能够使用 tickValues() 而不是 ticks() 通过以下答案解决我的问题 7 天。但是，对于较大的值，比如显示 2 个月的图形数据，我将有 30 个数据点。我仍然看到我的图表在悬停时没有对齐:

如您所见，悬停点仍未与垂直刻度对齐。我不想在图表上强制 ticksValues 超过 7 天。有什么想法可以实现吗？

仅供引用:我用它让 nvd3 显示 7 个值:

    var datas = this.graphFunction(data);
    chart2.xAxis.tickValues(datas[0].xAxisTickValues);

http://jsfiddle.net/86hr7h1s/5/

谢谢!

Answer 1

如果你想精确控制刻度，你应该使用 .tickValues() 而不是 ticks()。

API Doc