javascript - D3 timescale with date object returning NaN - Stack Overflow

admin管理员组

文章数量:1023018

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: /

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.

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/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.

• javascript
• d3.js

Share Improve this question Follow edited Feb 21, 2014 at 21:09 JamesE asked Feb 21, 2014 at 17:10 JamesEJamesE 3,92399 gold badges4747 silver badges8585 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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./mbostock/d3/wiki/Time-Scales#wiki-domain

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: /

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.

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/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.

• javascript
• d3.js

Share Improve this question Follow edited Feb 21, 2014 at 21:09 JamesE asked Feb 21, 2014 at 17:10 JamesEJamesE 3,92399 gold badges4747 silver badges8585 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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./mbostock/d3/wiki/Time-Scales#wiki-domain

本文标签： javascriptD3 timescale with date object returning NaNStack Overflow