What is wrong with the way I input Dates with the scaleTime() function in d3?

I am using D3, Javascript, HTML and the function d3.scaleTime()

What is wrong with the way I input Dates with the scaleTime() function in d3?

I am currently trying to make an x-axis with d3, based on time using d3.scaleTime(). However whenever i input the timeData to scaleTime.domain() no data shows on my axis. I get a blank axis.

The section of code I think my bug is coming from is here:

let timeData = ["2020-10-05", "2000-10-04"]

d3.scaleTime()
.domain( [timeData[0], timeData[1] ) 
.range( [0,400] )

I have tried changing timeData to [2020-10-05, 2000-10-04] However I then get decimal points on my axis.

any help is appreciated

Answer

you need to pass min and max values as Date Formats on scaleTime.

d3.scaleTime()
.domain( new Date(timeData[0]), new Date(timeData[1]) ) 
.range( [0,400] )

Also note that min value is lesser than max value.

Reason its not working is that it is considering them as String values.