如何强制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));
                });

这里是小提琴: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().

https://github.com/mbostock/d3/wiki/SVG-Axes#tickValues