Skip to content
Advertisement

How to parse new Date.now() object with D3.js to generate a linechart

I’m trying to make a linechart with D3 and React where the x axis is based on Date.now() object and all the ticks are a minute apart on a 10mn window.

  1. I can’t generate the line because I get “NaNNaNNaN” in my svg path;
  2. Can’t seem to figure out how to have ticks minutes apart on my x axis;

Here’s how the data looks like

JavaScript

the timestamp key is a new Date.now() coming from the server

JavaScript

This is my first time using D3, any help would be greatly appreciated !

Edit: here’s what I tried so far

JavaScript

Even tried to return convertedTime wrapped up by parsetime like so parsetime(convertedTime) Didn’t work either.

Advertisement

Answer

I think you have a problem in Initializing x scale domain

JavaScript

the scaleTime expect the domain to be a [Date|number, Date|number], you are using timeFormat which convert number|Date into a string based on the given format.

Try to use this instead:

JavaScript

Constructing the line

JavaScript

If you need to convert timestamps into Dates, you can map the whole data array

JavaScript
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement