CODEWITHSUNDEEP
javascriptd3.js
JamesE
JamesE

Reputation: 3923

D3 timescale with date object returning NaN

I have a Date object that I am passing to a D3 time scale:

var x = d3.time.scale()
    .range([0, main_width-axis_offset]);

x.domain(d3.extent(data, function(d) { return d.date; }));

Then later on...

var area = d3.svg.area()
    .x(function(d) { return x(d.date); })

d.date is in the following format:

d.date = new Date(d.year, d.month-1, d.day);

Mon Jan 20 2014 00:00:00 GMT-0500 (Eastern Standard Time)

Here is a fiddle link showing the full code: http://jsfiddle.net/goodspeedj/Ds9E6/

The docs state "Given a date x in the input domain, returns the corresponding value in the output range."

Is this expecting date in a different format? Thank you.

Upvotes: 3

Views: 2977

Answers (2)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

The problem is that you are getting the domains for x and y for data, but the real data is under data.results. If you change your code accordingly, everything works fine:

x.domain(d3.extent(data.result, function(d) { return d.date; }));
y.domain([0, d3.max(data.result, function(d) { return d.y0 + d.y; })]);

Complete jsfiddle here.

Upvotes: 5

rom99
rom99

Reputation: 799

You haven't specified the domain for the scale, only the range. E.g.:

var x = d3.time.scale().range([0, main_width-axis_offset]).domain([minDate, maxDate]);

The scale requires range and domain, because it maps one to the other. So you should have the date you want to map to 0 in the x axis in place of "minDate", and the date you want to map to whatever value main_width-axis_offset is in place of "maxDate".

In the API doc: https://github.com/mbostock/d3/wiki/Time-Scales#wiki-domain

Upvotes: 1

Related Questions