Javascript 错误：<；路径>；属性d：预期的数字；“南，南，南”；

我正在尝试使用D3.js v4创建一个多折线图。我正在使用以下示例：

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

数据对象：

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代码：

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

我在控制台中看到以下错误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

错误：属性d：预期数字，“MNaN，NaNLNaN，NaN”。
（匿名）@d3.v4.min.js:205
ul@d3.v4.min.js:3768
al@d3.v4.min.js:3775
（匿名）@multi-line.js:51
（匿名）@multi-line.js:45
（匿名）@d3.v4.min.js:5857
调用@d3.v4.min.js:3622
e@d3.v4.min.js:5840

---

非常感谢您的帮助。

在定义您的路径时：

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

---

您正在使用教程中提供给您的内容，但是

dataNest

中的每个项都没有

values

属性。

问题的根源在于，匿名函数中的值

d

传递给了

dataNest。forEach

仍然包含一个嵌套级别，但您使用它时就好像它没有任何嵌套一样。您的代码失败，因为它正在仅具有

键

和

值

属性的对象上查找

日期

和

可用EvalumeCapacity

属性

最终有两种方法可以解决此问题：

使用组合存储系统和池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

---

谢谢@chazsolo我把它改成了

.attr（“d”，行）并修复了控制台中的错误。现在有一个新问题，图形上的所有线都重叠。这就好像它们共享相同的数据一样。@Clarkus978-hmm，有没有可能在jsFiddle上得到一个工作示例，或者类似的东西？嗯，
dataNest
中的每个项确实都有一个
值
属性。
dataNest
的内容在“数据对象”下的问题中。@LukeWoodward也许我没有注意到这一点，但这似乎是最合理的问题，因为
d
是什么定义了这一行，他得到了NaN。如果你能揭露更多的问题，请随时解释@chazsolo：提问者使用了两个嵌套级别（即在
d3.nest
下调用
.key
）。使用
dataNest.forEach
打开其中一个级别。出现错误的原因是，
line
函数在传递数据时仍应用了一级嵌套，而这不是
x
和
y
函数所期望的。使用
d3.nest
有什么原因吗？您链接到的示例没有使用
d3.nest
。我发布的示例没有使用nest，但我使用的数据关系需要它。这里有一个相关的图表，它提供了关于我的数据的更多信息。好的，谢谢你，但我还不是100%清楚你想要的图表是什么样子。存储系统和池的每个组合都应该有一行吗？我试图从每个存储系统中为每个池绘制一行。例如，“system03”应该有两行用于poolId“0”和“1”