d3.js: d3.min.JS:1 Error: attribut d: Expected number, " MNaN, NaNLNaN,NaN"

Selon documentation toutes les valeurs résultant de L'analyse du CSV seront des chaînes:

Notez que les valeurs elles-mêmes sont toujours des chaînes; ils ne seront pas automatiquement converties en nombres.

vous devrez spécifier une fonction accessor qui s'occupe de la conversion

d3.csv('Book1.csv', convert, init); //load data, convert, then initialize chart

function convert(d) {
  return {
    date: new Date(d.date),
    value: +d.value         // convert string to number
  };
} 

comme effet secondaire, cela simplifiera également votre code car il vous libère d'avoir à faire une conversion à chaque fois vous accédez aux valeurs. Voici le code complet:

var Chart = (function(window, d3) {

  var svg, data, x, y, xAxis, yAxis, dim, chartWrapper, line, path, margin = {},
    width, height;

  d3.csv('Book1.csv', convert, init); //load data, convert, then initialize chart

  function convert(d) {
    return {
      date: new Date(d.date),
      value: +d.value         // convert string to number
    };
  } 

  //called once the data is loaded
  function init(csv) {
    data = csv;

    //initialize scales
    xExtent = d3.extent(data, function(d, i) {
      return d.date;
    });
    yExtent = d3.extent(data, function(d, i) {
      return d.value;
    });
    x = d3.time.scale().domain(xExtent);
    y = d3.scale.linear().domain(yExtent);

    //initialize axis
    xAxis = d3.svg.axis().orient('bottom');
    yAxis = d3.svg.axis().orient('left');

    //the path generator for the line chart
    line = d3.svg.line()
      .x(function(d) {
        return x(d.date)
      })
      .y(function(d) {
        return y(d.value)
      });

    //initialize svg
    svg = d3.select('#chart').append('svg');
    chartWrapper = svg.append('g');
    path = chartWrapper.append('path').datum(data).classed('line', true);
    chartWrapper.append('g').classed('x axis', true);
    chartWrapper.append('g').classed('y axis', true);

    //render the chart
    render();
  }

  function render() {

    //get dimensions based on window size
    updateDimensions(window.innerWidth);

    //update x and y scales to new dimensions
    x.range([0, width]);
    y.range([height, 0]);

    //update svg elements to new dimensions
    svg
      .attr('width', width + margin.right + margin.left)
      .attr('height', height + margin.top + margin.bottom);
    chartWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    //update the axis and line
    xAxis.scale(x);
    yAxis.scale(y);

    svg.select('.x.axis')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis);

    svg.select('.y.axis')
      .call(yAxis);

    path.attr('d', line);
  }

  function updateDimensions(winWidth) {
    margin.top = 20;
    margin.right = 50;
    margin.left = 50;
    margin.bottom = 50;

    width = winWidth - margin.left - margin.right;
    height = 500 - margin.top - margin.bottom;
  }

  return {
    render: render
  }
})(window, d3);