D3 <path> 的坐标中有 NAN 值

Question

我正在尝试遵循以下示例：折线图：bl.ocks.org，但我不断收到如下错误：

d3.min.js：1 错误：属性 d="MNaN，450LNaN，425.96810933940776LNaN，386.2186788154896LNaN，373.917995444>1913LNaN，375.28473804100224LNaN，379.0432801822323LNaN，368.5649202733485LNa>N，368.4510250569475LNaN...

我已经解决了这个例子的许多错误（过时？）部分，但我无法破解这个。我已经读过关于时间对象与将它们格式化为字符串导致类似问题的信息，但无论我以哪种方式格式化 d.date，我的输出中总是包含 NAN。

杰森：

 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函数。

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

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