错误：<path>属性d：预期编号，“MNaN，25.707269548 ...

Question

在发布之前，我看了这个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服务是没有问题的。

任何帮助表示赞赏。

谢谢。

Answer 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); 
    }); 

    ... 
}