CODEWITHSUNDEEP
javascriptsvg
Raj
Raj

Reputation: 502

d3.time.scale() returning NAN

I am trying to follow this example:http://bl.ocks.org/mbostock/3883245

However, when trying to replicate to my needs values for x scale being returned in NAN. Values for y scale returns fine. Kindly help me to find out what I a doing wrong.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.key); })
    .y(function(d) { return y(d.values.total); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("combine.csv", function(error, data) {

data.forEach(function(d) {
    d.week = parseDate(d.week);

  });

    data= d3.nest()
.key(function(d) { return d.week; })
.rollup(function(d) { return {"total": d.length , hours: d3.sum(d, function(g) {return g.hours; })};})
.entries(data);


  x.domain(d3.extent(data, function(d) { console.log(d.key);return d.key; }));
  console.log(d3.extent(data, function(d) { return d.key; }));

  y.domain(d3.extent(data, function(d) { console.log( d.values.total);return d.values.total; }));
 console.log(data);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});




</script>
</head>

Upvotes: 1

Views: 1914

Answers (1)

kalley
kalley

Reputation: 18462

You need to use actual Date objects, not just the string. So you can update the following lines to fix it:

var line = d3.svg.line()
    .x(function (d) {
    return x(new Date(d.key));
});

And

x.domain(d3.extent(data, function (d) {
    return new Date(d.key);
}));

I created a fiddle simulating your data: http://jsfiddle.net/LRY7w/

Alternatively, you could add the week property to the object you're returning from the rollup. Here's a fiddle and here's the revised rollup function:

.rollup(function (d) {
    return {
        week: d[0].week,
        "total": d.length,
        hours: d3.sum(d, function (g) {
            return g.hours;
        })
    };
})

Have to use d[0] since d is the nested rows, but since you're keying off of the week, it's the same in each object of the array, so using the first works just fine. And then instead of using new Date(d.key), you can just use d.values.week.

Upvotes: 1

Related Questions