2017-04-06 107 views
2

无法在我的图表中制作5分钟步骤如何更改d3.js中的时间刻度步骤?

这是我传给Angular Material图指令 该对象的一部分是我xAxis

xAxis: { 
 
    tickFormat: function(d) { 
 
    return $filter('date')(new Date(d * 1000), 'HH:mm'); 
 
    }, 
 
    ticks: 5, // as I know 2,5,10 
 
    showMaxMin: false 
 
},

X时间尺度17:46/18:03 我一直在尝试改变不同的值,也一直在阅读D3小技巧&伎俩,但没有找到答案。

我想打一个5分钟步,我的X规模看起来像18:00/18:05/18:10

+0

你可以提供一个完整的例子作为Plunker/JSFiddle吗? – jeznag

回答

-1
var startDate = data[0].x; 
var finishDate = data[data.length - 1].x; 
chart.xAxis.tickValues(d3.time.minutes(startDate, finishDate, 5)); 

本质上,它采用d3.time。分钟,每5分钟生成一个带时间戳的数组。然后传递给tickValues。

+0

感谢您的坚持,我没有倒下你,但你的解决方案不起作用 – DarthJS

+0

啊是的,因为nvd3没有通过第二个参数。 取而代之的是: var startDate = data [0] .x; var finishDate = data [data.length - 1] .x; viewFinder.xAxis.tickValues(d3.time.minutes(startDate,finishDate,5)); 本质上它使用d3.time.minutes每5分钟生成一个包含时间戳的数组。然后传递给tickValues。 – jeznag