最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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.

Share Improve this question edited Feb 21, 2014 at 21:09 JamesE asked Feb 21, 2014 at 17:10 JamesEJamesE 3,9239 gold badges47 silver badges85 bronze badges
Add a ment  | 

2 Answers 2

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

发布评论

评论列表(0)

  1. 暂无评论