Javascript NVD3-配置轴上的刻度
我有一个nvd3折线图,它显示了一个时间序列,但无法正确获取x轴上的刻度 对于较长的时间跨度,它可以按预期工作。但对于较短的时间跨度(此处:2005年12月31日至2006年1月1日),多个刻度将显示相同的日期: 请看一下这本书 我希望图表只显示数据点上的刻度,而不是中间的刻度。用折线图可以吗?根据我的理解,d3是可能的,但我不知道nvd3是否公开了这个功能Javascript NVD3-配置轴上的刻度,javascript,charts,d3.js,nvd3.js,Javascript,Charts,D3.js,Nvd3.js,我有一个nvd3折线图,它显示了一个时间序列,但无法正确获取x轴上的刻度 对于较长的时间跨度,它可以按预期工作。但对于较短的时间跨度(此处:2005年12月31日至2006年1月1日),多个刻度将显示相同的日期: 请看一下这本书 我希望图表只显示数据点上的刻度,而不是中间的刻度。用折线图可以吗?根据我的理解,d3是可能的,但我不知道nvd3是否公开了这个功能 我尝试过使用chart.xAxis.ticks()显式设置刻度数,但没有成功。唯一有效的方法是使用chart.xAxis.tickVal
我尝试过使用
chart.xAxis.ticks()
显式设置刻度数,但没有成功。唯一有效的方法是使用chart.xAxis.tickValues([…])
显式设置刻度值,但我不希望自己计算。通常解决这个问题的方法是使用。请注意,此示例本身不适用于NVD3,因为它使用的是旧版本的D3,但下面的示例将继续
你的例子中的问题是,刻度不是“干净”的时间分割,如果你应用多尺度格式,你会得到类似的结果。它总是显示更细粒度的格式,因为任何其他内容都会导致精度损失
但是,如果小时数小于3,您可以使用一个简单的启发式方法来显示日期而不是时间,这在您的情况下相当有效。有关示例,请参见。正确的方法是让你的蜱虫干净
这就引出了你的实际问题。除了为您想要做的事情显式设置.tickValues()
,没有其他方法,但是您可以非常轻松地计算数据中的x位置:
var xvalues = [],
tmp = data.map(function(e) {
return e.values.map(function(d) { return d[0]; });
});
xvalues.concat.apply(xvalues, tmp);
代码不是最漂亮的,因为它是嵌套结构,但相当简单。使用此选项,您可以显式设置记号值,完整示例。对不起,我刚开始有点偏离正切。不过,希望这是有帮助的。