javascript – NVD3 – 在轴上配置刻度

我有一个nvd3折线图,显示时间序列,无法在x轴上得到正确的刻度.

对于更长的时间跨度,它按预期工作.但对于较短的时间跨度(此处：12/31/05至01/01/06),多个刻度显示相同的日期：

请看一下code for this chart on JSFiddle

我希望图表只显示数据点的刻度,而不是之间.用折线图可以吗？根据我的理解,d3是可能的,但我无法弄清楚这个功能是否由nvd3公开.

我已经尝试使用chart.xAxis.ticks()明确设置滴答数,但没有成功.唯一有效的方法是使用chart.xAxis.tickValues([…])明确设置刻度值,但我不想自己计算它们.

解决方法:

一般来说,解决这个问题的方法是使用custom multi-scale time formats.请注意,此示例本身不适用于NVD3,因为它使用旧版本的D3,但下面的示例将会如此.

在你的情况下,问题是刻度不是“干净”的时间划分,如果你应用多尺度格式,你会得到像this这样的东西.它总是显示更细粒度的格式,因为其他任何东西都会涉及到损失精度

但是,如果小时数小于3,您可以使用简单的启发式方法来显示日期而不是时间,这在您的情况下效果相当不错.有关示例,请参见here.这样做的正确方法是让你的蜱清洁分裂.

这将我们带到您的实际问题.除了明确设置.tickValues()以实现您想要做的事情之外别无他法,但您可以非常轻松地计算数据中的x位置：

var xvalues = [],
    tmp = data.map(function(e) { 
            return e.values.map(function(d) { return d[0]; });
          });
xvalues.concat.apply(xvalues, tmp);

代码不是最漂亮的,因为它是一个嵌套的结构,但相当简单.使用此功能,您可以明确设置刻度值,完整示例here.

标签：javascript,charts,d3-js,nvd3-js
来源： https://codeday.me/bug/20190629/1323456.html