Question

我在Angular 5应用程序中使用d3来绘制一条线，但似乎无法正确显示数字。我收到此错误：

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

该错误可能从何而来？谢谢！任何帮助或想法都将不胜感激！

编辑：

我知道这是稍有不同的代码，但是在这个HERE上存在相同的问题。

非常感谢！我已经开始太久了，现在开始圈子

Answer 1

考虑到数据中日期的格式，分配给变量timeParse的{{1}}是正确的。
一旦您在parseTimeUtc循环中解析了日期，就无需在设置xAxis或在forEach生成器函数中再次解析它们。
```
line
```
所有日期都相同，因此我进行了一些更改（月）以使行可见。
在行中添加了以下temp_data.forEach(function (d) { d.date = parseTime_utc(d.date) d.temperature = +d.temperature; });：style使行可见。
您在SVG内附加了SVG（我想是复制/粘贴错误）。无论如何，将fill:none; stroke: steelblue;更改为#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);

更新的代码笔：https://codepen.io/anon/pen/bmmbzw

此外，如果您可以让我们知道为什么还有其他<script src="https://d3js.org/d3.v4.min.js"></script> <div id="watertemp_graph"> </div>和timeParse个用户，也许我也可以帮助您使用它们。

希望这会有所帮助。

更新：是否需要灵活的解析器？

如Mike在docs中所述：如果需要更灵活的解析器，请依次尝试多种格式，直到返回非空值为止，我的建议是进一步验证通过遵循this answer here来获得非空值（日期）。

与d3的角度：错误：<path>属性d：预期数字“ MNaN，25.384615384…”

1 个答案: