Error: attribute <path> d: expected number, "MNaN, NaNLNaN, NaN"

Question

I am trying to create a multi-line chart using D3.js v4. I am using this example: https://bl.ocks.org/mbostock/3884955 .

Example csv data:

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:

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 see the following error 4 times from the console:

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 greatly appreciated.

Answer 1

, d , dataNest.forEach, , , . , date availableVolumeCapacity , key values.

:

• , , . :

  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.

Answer 2

:

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.