CODEWITHSUNDEEP
javascriptd3.js
redixhumayun
redixhumayun

Reputation: 1844

D3 v4 returning error for scaleTime when passing in Date object

I am trying to create a simple bar chart where the x axis is formatted with dates. I have defined my x like so, 

var minDate = new Date(data[0][0]);
var maxDate = new Date(data[274][0]);

var x = d3.scaleTime()
          .domain(minDate, maxDate).range([0, width]);

However, I get an error when I try to call this from my chart 

chart.selectAll('.bar')
         .data(data)
         .enter().append('rect')
         .attr('class', 'bar')
         .attr('x', function(d){
          return x(new Date(d[0]));
         })

The error says

Error: attribute x: Expected length, "NaN".

Not really sure what I'm doing wrong. Do date objects still work in D3 v4 with a scaleTime?

Here is a link to the dataset if anyone wants to take a look https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json

Here is a link to the codepen where I am working on this

http://codepen.io/redixhumayun/pen/ZBdmQp?editors=0010

Upvotes: 2

Views: 1326

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

In d3 scales, domain takes an array as argument. Therefore, it should be:

.domain([minDate, maxDate])

Upvotes: 4

Related Questions