错误：<路径> 属性 d：预期数字，“MNaN,25.707269548...答案

【问题标题】：Error: <path> attribute d: Expected number, "MNaN,25.707269548…错误：<路径> 属性 d：预期数字，“MNaN,25.707269548...
【发布时间】：2017-10-05 16:47:42
【问题描述】：

在发布之前，我查看了这个有同样问题的SO question，我确信解决方案与他的相似，但我是 d3 的新手，所以我不知道如何解决我的问题。

我正在尝试修改 d3 图表，使其从json 流而不是csv 文件中读取。该图基于此bl.ocks.org link。

所以我基本上创建了一个WCF service，它返回的数据与CSV 中的数据完全相同。返回的流如下所示：

[
    {"date":"6/1/2017","sales":1394.46},
    {"date":"6/2/2017","sales":1366.42},
    {"date":"6/3/2017","sales":1498.58}
]

我的d3 图表如下所示：

//d3.csv("sp500.csv", type, function(error, data) {
d3.json("http://MyServer:86/Erase.svc/GetDataErase", function(error, data) {
  console.log(data);
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.sales; })]);
  x2.domain(x.domain());
  y2.domain(y.domain());

  focus.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);

  focus.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  focus.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis);

  context.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area2);

  context.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

  context.append("g")
      .attr("class", "brush")
      .call(brush)
      .call(brush.move, x.range());

  svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);
});

这个csv 文件如下所示：

date,sales
6/1/2017,1394.46
6/2/2017,1366.42

console.log(data);返回数组正确，所以wcf服务不是问题。

感谢任何帮助。

谢谢。

【问题讨论】：

你在解析日期数据吗？

标签： javascript html d3.js nvd3.js

【解决方案1】：

在example 中，将行转换函数传递给 d3.csv 以解析日期。由于d3.json不带行转换功能，数据加载完成后需要自己解析日期：

d3.json("mydata.json", function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  ...
}

【讨论】：