title: Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN"
body: <p>I'm tring to create a multi-line chart using D3.js v4. I'm using this example: <a href="https://bl.ocks.org/mbostock/3884955" rel="noreferrer">https://bl.ocks.org/mbostock/3884955</a>.</p>
  
  <p>Sample csv Data:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Data Object:</p>
  
  <pre><code>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"
  </code></pre>
  
  <p>D3.js Code:</p>
  
  <pre><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)");
  });
  </code></pre>
  
  <p>I'm seeing the following error 4 times from the console:</p>
  
  <pre><code>Error: &lt;path&gt; 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
  </code></pre>
  
  <p>Any help is much appreciated.</p>