2017-04-06 4 views
2

Impossible de faire 5 min pas dans mon thème.comment changer le pas de temps cocher dans d3.js?

Ceci est la partie d'un objet que je passe à Angular Material graphique directive Ceci est mon xAxis:

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

Mon X échelle de temps est 17h46/18:03 J'ai essayé de changer différentes valeurs, et j'ai aussi lu D3 Tips & Trick mais n'a pas trouvé la réponse.

Je veux faire un 5 min étape, que mon échelle X ressemble 18:00/18:05/18:10

+0

Pouvez-vous donner un exemple complet en tant que Plunker/JSFiddle? – jeznag

Répondre

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

Essentiellement, il utilise d3.time. minutes pour générer un tableau avec des horodateurs toutes les 5 minutes. Cela est ensuite passé à tickValues.

+0

Merci pour votre unwer, je ne vous ai pas downvote, mais votre solution ne fonctionne pas – DarthJS

+0

Ah oui car nvd3 ne passe pas par le second paramètre. Cela fonctionne à la place: var startDate = data [0] .x; var finishDate = data [data.length - 1] .x; viewFinder.xAxis.tickValues ​​(d3.time.minutes (startDate, finishDate, 5)); Essentiellement, il utilise d3.time.minutes pour générer un tableau avec horodatage toutes les 5 minutes. Cela est ensuite passé à tickValues. – jeznag