score:1

Accepted answer
  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.


Related Query

More Query from same tag