如何强制nvd3显示与图nvd3上绘制的值相同的刻度数 [英] How to force nvd3 to display the equal number of ticks as that of the values plotted on the graph-nvd3

问题描述

如何强制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天和10滴答相反. 有什么主意是什么问题，以及如何纠正这个问题?

EDIT ::::::

使用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/

谢谢！

解决方案

如果要精确控制刻度，则应使用.tickValues()而不是ticks().

API文档

How can force nvd3 graph to have certain number of ticks to be displayed, for example, please find below the image of the graph plotted:

as seen below I have 7 values pushed to the array holding the 7 days of the week. However looks like they have more number of ticks than the actual values. What I'm looking for is something similar to this:http://nvd3.org/examples/line.html However when i hover over these ticks they are misaligned as shown:

thats where the graph line should be and thats where the hovered tick shows the tooltip.but for some reason i dont get 7 ticks displayed instead gets 10 ticks displayed and all the hovered tooltips get misaligned.I also tried to force nvd3 to have specific # of ticks but didnt work.

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

here is the fiddle: http://jsfiddle.net/86hr7h1s/4/ I should ideally display 7 days and 7 ticks on the graph as oppose to duplicate days and 10 ticks on the graph. Any ideas whats wrong and how to correct this?

EDIT::::::

I was able to fix my issue for 7 days with the below answer, using the tickValues() instead of ticks(). However, for large values, say display a graph data of 2 months, i'll have 30 data points. I still see that my graph ticks on hover dont align:

As you can see above the hover points still dont align with the vertical ticks. I dont want to force the ticksValues for more than 7 days on the graph. Ay ideas how this could be achieved?

FYI: I used this to make nvd3 display 7 values:

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

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

Thanks!

解决方案

If you want to control the ticks precisely, you should use .tickValues() rather than ticks().

API Doc

这篇关于如何强制nvd3显示与图nvd3上绘制的值相同的刻度数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！