Javascript 错误：<path> 属性 d：预期的数字，“MNaN，NaNLNaN，NaN”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43811434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN"
提问by Clarkus978
I'm tring to create a multi-line chart using D3.js v4. I'm using this example: https://bl.ocks.org/mbostock/3884955.
我正在尝试使用 D3.js v4 创建一个多折线图。我正在使用这个例子：https: //bl.ocks.org/mbostock/3884955。
Sample csv Data:
示例 csv 数据：
storageSystem,poolId,availableVolumeCapacity,date
system01,0,18031398,20170413
system01,1,15626268,20170413
system01,2,61256286,20170413
system01,3,119514990,20170413
system02,0,15046668,20170413
system02,1,12486558,20170413
system02,2,12303396,20170413
system03,0,35171335,20170413
system03,1,17263722,20170413
system01,0,18031387,20170414
system01,1,15626257,20170414
system01,2,61256275,20170414
system01,3,119514989,20170414
system02,0,15046657,20170414
system02,1,12486547,20170414
system02,2,12303385,20170414
system03,0,35171324,20170414
system03,1,17263711,20170414
Data Object:
数据对象：
0: Object
color: "#8c564b"
key: "system03"
values: Array(2)
0: Object
key: "0"
values: Array(23)
0: Object
availableVolumeCapacity: 35171335
date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
poolId: "0"
storageSystem: "system03"
1: Object
key: "1"
values: Array(23)
0: Object
availableVolumeCapacity: 17263722
date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
poolId:"1"
storageSystem: "system03"
D3.js Code:
D3.js 代码：
var svg = d3.select("svg")
m = {top: 20, right: 20, bottom: 50, left: 20},
w = svg.attr("width") - m.left - m.right,
h = svg.attr("height") - m.top - m.bottom,
g = svg.append("g").attr("transform", "translate(" + m.left + "," + m.top + ")");
var parseTime = d3.timeParse("%Y%m%d");
var x = d3.scaleTime().range([0, w]),
y = d3.scaleLinear().range([h, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.availableVolumeCapacity); });
d3.csv("ssystem.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseTime(d.date);
d.availableVolumeCapacity = +d.availableVolumeCapacity;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.availableVolumeCapacity; })]);
var dataNest = d3.nest()
.key(function(d) {return d.storageSystem; })
.key(function(d) {return d.poolId; })
.entries(data);
console.log(dataNest)
legendSpace = w/dataNest.length;
dataNest.forEach(function(d,i) {
svg.append("path")
.attr("class", "line")
.style("stroke", function() {
return d.color = z(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, ''))
.attr("d", line(d.values));
svg.append("text")
.attr("x", (legendSpace/2)+i*legendSpace)
.attr("y", h + (m.bottom/2)+ 5)
.attr("class", "legend")
.style("fill", function() {
return d.color = z(d.key); })
.on("click", function(){
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
})
.text(d.key);
});
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + h + ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Capacity (MB)");
});
I'm seeing the following error 4 times from the console:
我从控制台看到以下错误 4 次：
Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".
(anonymous) @ d3.v4.min.js:205
ul @ d3.v4.min.js:3768
al @ d3.v4.min.js:3775
(anonymous) @ multi-line.js:51
(anonymous) @ multi-line.js:45
(anonymous) @ d3.v4.min.js:5857
call @ d3.v4.min.js:3622
e @ d3.v4.min.js:5840
Any help is much appreciated.
任何帮助深表感谢。
采纳答案by Luke Woodward
The root of your problem is that the value din your anonymous function passed to dataNest.forEachstill contains one level of nesting but you are using it as if it doesn't have any nesting. Your code fails because it is looking for dateand availableVolumeCapacityproperties on an object that only has keyand valuesproperties.
问题的根源在于d传递给的匿名函数中的值dataNest.forEach仍然包含一层嵌套，但您正在使用它，就好像它没有任何嵌套一样。因为它正在寻找你的代码没有date和availableVolumeCapacity属性的对象，只有对key和values性能。
There are ultimately two approaches to fix this:
最终有两种方法可以解决这个问题：
Use a single key function which combines both the storage system and pool ID. This reduces the nesting to only one level:
var dataNest = d3.nest() .key(function(d) { return d.storageSystem + " " + d.poolId; }) .entries(data);Use two nested calls to
forEach:dataNest.forEach(function(d2,i2) { d2.forEach(function (d,i) { svg.append("path") // .... rest of inner function omitted }); });You will need to go through all uses of
d(in particulard.key) andiwithin the inner function (whose body I omitted for brevity) to see whether you need to incorporated2andi2. For example, perhaps you want to used2.key + " " + d.keyinstead ofd.key.
使用结合了存储系统和池 ID 的单个键功能。这将嵌套减少到只有一层：
var dataNest = d3.nest() .key(function(d) { return d.storageSystem + " " + d.poolId; }) .entries(data);使用两个嵌套调用
forEach：dataNest.forEach(function(d2,i2) { d2.forEach(function (d,i) { svg.append("path") // .... rest of inner function omitted }); });您将需要遍历所有使用
d（特别是d.key）和i内部函数（为简洁起见我省略了它的主体）以查看是否需要合并d2和i2。例如，也许您想使用d2.key + " " + d.key代替d.key.
回答by chazsolo
When defining your path:
定义路径时：
svg.append("path")
.attr("class", "line")
.style("stroke", function() {
return d.color = z(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, ''))
.attr("d", line(d.values)); // d.values here is not defined
you are using what was given to you in the tutorial, but each item in dataNestdoes not have a valuesproperty.
您正在使用教程中提供的内容，但中的每个项目dataNest都没有values属性。
