Question

我正在尝试关注此示例：Line Chart: bl.ocks.org，但我一直收到如下错误：

d3.min.js：1错误：属性d的值无效=“MNaN，450LNaN，425.96810933940776LNaN，386.2186788154896LNaN，373.917995444＆gt; 1913LNaN，375.28473804100224LNaN，379.0432801822323LNaN，368.5649202733485LNa＆gt; N，368.4510250569475LNaN ...

我已经解决了这个例子的许多错误（过时的？）部分，但我无法解决这个问题。我已经阅读过时间对象与将它们格式化为字符串导致类似问题，但无论我格式化d.date，我的输出总是有NANs。

JSON：

 var lineData = [
{"date":"24-Apr-07","close":93.24},
{"date":"25-Apr-07","close":95.35},
{"date":"26-Apr-07","close":98.84}...

JS：

var parseTime = d3.time.format("%d-%b-%y").parse;
...

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

function type(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}

Codepen上的完整代码：http://codepen.io/SammyJ/pen/qZoEdO

Answer 1

您在这里错过了type功能。

您需要将type函数应用于原始数据：

var data = lineData.map(type);

这是在您取出的样品的装载阶段完成的：

d3.tsv("data.tsv", type, function(error, data) {
    if (error) throw error;

文档： https://github.com/mbostock/d3/wiki/CSV

请注意，值本身始终是字符串;它们不会自动转换为数字。 JavaScript可以自动将字符串强制转换为数字（例如，使用+运算符）。通过指定访问器函数，您可以将字符串转换为数字或其他特定类型，例如日期：

此外，您的域名正在接收新数据，因此无需重新处理数据，因此这两行

x.domain(d3.extent(data, function(d) { return parseTime(d.date); }));
y.domain(d3.extent(data, function(d) { return +d.close; }));

需要更改为：

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));

请参阅更新的示例： http://codepen.io/anon/pen/aNjgEw

D3 <path>在其坐标中具有NAN值

1 个答案: