Error: <path> attribute d: Expected number, "MNaN,25.707269548…
Error: <path> attribute d: Expected number, "MNaN,25.707269548…
在发布之前,我查看了这个有同样问题的 ,我确定解决方案与他的相似,但我是 d3 的新手,所以我不知道如何解决我的
我正在尝试修改 d3 图表,以便它从 json
流而不是 csv
文件中读取。该图基于此 bl.ocks.org link.
所以我基本上创建了一个 WCF service
,其中 returns 与 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);
returns数组正确,所以wcf服务不是问题。
感谢任何帮助。
谢谢。
在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);
});
...
}
在发布之前,我查看了这个有同样问题的
我正在尝试修改 d3 图表,以便它从 json
流而不是 csv
文件中读取。该图基于此 bl.ocks.org link.
所以我基本上创建了一个 WCF service
,其中 returns 与 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);
returns数组正确,所以wcf服务不是问题。
感谢任何帮助。
谢谢。
在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);
});
...
}