Угловой с d3: ошибка: <path>атрибут d: ожидаемое число, «MNaN, 25,384615384…»

Question

Я использую d3 в приложении Angular 5 для построения графика, и мне кажется, что я не могу правильно понять свои цифры.Я получаю эту ошибку:

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

Я предполагаю, что это связано либо с тем, как я анализирую свои даты, либо с типом даты, либо с доменом на моей оси?

Рассматриваемый код d3 выглядит следующим образом:

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']); });

Мои данные выглядят в формате UTC:

[{"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" }]

Откуда может исходить эта ошибка?Спасибо!Любая помощь или мысли с благодарностью!

РЕДАКТИРОВАТЬ:

Я знаю, что это немного другой код, но у меня такая же проблема на этом коде ручки ЗДЕСЬ .

Спасибо большое!Я начал слишком долго и начинаю ходить кругами

Answer 1

1. Значение timeParse, присвоенное переменной parseTimeUtc, является правильным с учетом формата дат в ваших данных.

2. После анализа дат в forEachцикл, вам не нужно анализировать их снова при установке xAxis или в функции генератора line.

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

3. Все даты совпадают, и поэтому явнесены незначительные изменения (месяцы), чтобы сделать линию видимой.

4. В строку добавлено следующее style: fill:none; stroke: steelblue;, чтобы сделать линию видимой.

5. Вы добавили SVG в SVG (я полагаю, ошибка копирования / вставки).В любом случае, изменили #watertemp_graph на <div></div>.

Фрагмент:

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>

Обновлен код ручки: https://codepen.io/anon/pen/bmmbzw

Кроме того, если вы можете сообщить нам, почему у вас есть другие timeParse rs и timeFormat s, может быть, я могу помочь вам с их использованием.

Надеюсь, это поможет.

ОБНОВЛЕНИЕ: Нужен гибкий анализатор?

Как указано в документах Майка: Если требуется более гибкий синтаксический анализатор, попробуйте несколько форматов последовательно, пока один не вернет ненулевое , и мое предложение будет следующимпроверьте ненулевое значение (дату), следуя этому ответу здесь .