错误：<path>属性d：预期编号，“MNaN，NaNLNaN，NaN”

Question

我正在使用D3.js v4创建多行图表。我使用这个例子：https://bl.ocks.org/mbostock/3884955。

样品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 

任何帮助非常感谢。

Answer 1

问题的根源在于，传递给dataNest.forEach的匿名函数中的值d仍包含一层嵌套，但您正在使用它，就好像它没有嵌套一样。您的代码失败，因为它正在寻找仅具有key和values属性的对象上的date和availableVolumeCapacity属性。

有最终解决此两种方法：

1. 使用其中结合了存储系统和池ID的单个密钥的功能。这减少了嵌套到只有一层：内

   dataNest.forEach(function(d2,i2) { 
       d2.forEach(function (d,i) { 
        svg.append("path") 
        // .... rest of inner function omitted 
       }); 
   }); 
   

   您将需要经过的d所有使用（特别是d.key）和i：

   var dataNest = d3.nest() 
       .key(function(d) { return d.storageSystem + " " + d.poolId; }) 
       .entries(data); 
   

2. 使用两个嵌套调用forEach内部函数（为简洁起见，我忽略了其主体）以查看是否需要合并d2和i2。例如，也许你想用d2.key + " " + d.key而不是d.key。

Answer 2

在定义路径：您正在使用什么给你的教程，但在dataNest每个项目不具有values财产

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 

。