CODEWITHSUNDEEP
d3.js
victormejia
victormejia

Reputation: 1184

d3.time scale returning NaN

I have the following example

http://jsfiddle.net/BSB42/

and I can't seem to figure out why the x scale is not working for me (Getting NaN for my cx values). Here is an excerpt of my code:

var parse = d3.time.format("%Y").parse;

var data = [
    { year: "2008", number : 3},
    { year: "2009", number : 10},
    { year: "2010", number : 17},
    { year: "2011", number : 23},
    { year: "2012", number : 34},
    { year: "2013", number : 50}
];



for (var i = 0; i < data.length; i++) {
    var d = data[i];
    d.year = parse(d.year);
};


var yearScale = d3.time.scale()
    .domain(d3.extent(data, function (d) { return d.year;}))
    .range(50, window.innerWidth - 50);

var numberScale = d3.scale.linear()
    .domain([0, d3.max(data, function (d) { return d.number;})])
    .range([50, window.innerHeight - 50]);


svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr({
        cx: function (d) { return yearScale(d.year); },
        cy: function (d) { return window.innerHeight - numberScale(d.number)},
        r: 4,
        fill: "#fff",
        stroke: "#78B446",
        "stroke-width": 4
    })

Upvotes: 2

Views: 2313

Answers (1)

Jason Aller
Jason Aller

Reputation: 3652

.range() needs an array so change to .range([50, window.innerWidth - 50]); in your yearScale. You did it correctly for the numberScale already.

updated jsFiddle

Upvotes: 5

Related Questions