Angular with d3: Error: attribute d: Expected number, "MNaN,25.384615384…"

Question

I am using d3 in an Angular 5 app to graph a line, and I can't seem to get my numbers right. I'm getting this error:

Error: <path> attribute d: Expected number, "MNaN,25.384615384…".

I assume it's either something to do with how I'm parsing my dates, or date type, or the domain on my axis?

The d3 code in question looks like:

var x = d3.scaleLinear()
  .range([0, width - 100])
  .domain(<[Date, Date]>d3.extent(this.temp_data, function (d) { return parse(d['date']); }));

var xAxis = d3.axisBottom(x)
  .scale(x)
  .ticks((width + 2) / (height + 2))
  .tickSize(-height)
  .tickPadding(10)
  .tickFormat(d3.timeFormat("%b %d, %H:%M:%S"))

var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ");

var line = d3.line()
  .x(function (d) { return x(parseTime(d['date'])); })
  .y(function (d) { return y(d['temperature']); });

My data looks like in UTC format:

[{"temperature": "11.0", "date": "2018-10-10 20:36:27 UTC" }.
 {"temperature": "11.2", "date": "2018-10-10 20:34:27 UTC" },
 {"temperature": "10.9", "date": "2018-10-10 20:32:27 UTC" },
 {"temperature": "11.3", "date": "2018-10-10 20:30:27 UTC" },
 {"temperature": "11.0", "date": "2018-10-10 20:28:27 UTC" }]

Where might that error be coming from? Thanks! Any help or thoughts are greatly appreciated!

EDIT:

I know this is slightly different code but I am having the same problem on this codepen HERE.

thanks so much! I've been starting at it too long now and am starting to go in circles

Answer 1

1. The timeParse assigned to the variable parseTimeUtc is the correct one considering the format of the dates in your data.

2. Once you parse the dates in the forEach loop, you don't need to parse them again while setting the xAxis or within the line generator function.

   temp_data.forEach(function (d) {
     d.date = parseTime_utc(d.date)
     d.temperature = +d.temperature;
   });
   

3. All the dates are the same and so I've made slight changes (months) to make the line visible.

4. Added the following style to the line: fill:none; stroke: steelblue; to make the line visible.

5. You had a SVG appended within a SVG (copy/paste error I suppose). Anyway, changed #watertemp_graph to a <div></div>.

Snippet:

var temp_data = [
{"temperature": "11.0", "date": "2018-08-22T14:53:37.267Z" },
 {"temperature": "11.2", "date": "2018-07-22T14:53:37.267Z" },
 {"temperature": "10.9", "date": "2018-08-22T14:53:37.267Z" },
 {"temperature": "11.3", "date": "2018-05-22T14:53:37.267Z" },
 {"temperature": "11.0", "date": "2018-08-22T14:53:37.267Z" }]

var parseDate = d3.timeParse("%Y-%m-%d %X"); //27-May-12 16:00:00. This is used for D3JS parsing
var formatTime = d3.timeFormat("%Y-%m-%d %X");
 var parseTime_utc = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ");
var formatDate_utc = d3.timeFormat("%b %d, %Y %H:%M:%S");
// var parse = parseDate(moment.utc(d.date).format("YYYY-MM-DD HH:mm:ss"))

temp_data.forEach(function (d) {
        d.date = parseTime_utc(d.date)
        d.temperature = +d.temperature;
});

var margin = { top: 30, right: 10, bottom: 50, left: 70 },
      width = 600 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;

    // Parse the date / time
    

    // Set the ranges
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    // Define the axes
    var xAxis = d3.axisBottom(x)
        .ticks(5);

    var yAxis = d3.axisLeft(y)
      .ticks(5);

    // Define the line
    var valueline = d3.line()
      .x(function (d) { return x(d['date']); })
      .y(function (d) { return y(d['temperature']); });


    // Adds the svg canvas
    var svg = d3.select("#" + "watertemp_graph")
      .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 + ")");



    // Scale the range of the data
    x.domain(d3.extent(temp_data, function (d) { return d.date; }));
    y.domain(d3.extent(temp_data, function (d) { return d['temperature']; }));

    // Add the valueline path.
    svg.append("path")
      .attr("class", "line")
      .attr("d", valueline(temp_data)).style('fill', 'none').style('stroke', 'steelblue');


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

    // Add the Y Axis
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="watertemp_graph">
 
  </div>

Updated codepen: https://codepen.io/anon/pen/bmmbzw

Also, if you could let us know why you have the other timeParsers and timeFormats, maybe I can help you with using those as well.

Hope this helps.

UPDATE: Need of a flexible parser?

As stated in the docs by Mike: If a more flexible parser is desired, try multiple formats sequentially until one returns non-null and my suggestion would be to be to further validate the non-null value (date) by following this answer here.