0

I am learning D3 JS using latest version 6. I am trying to fetch CSV data from external file and it runs fine if use D3 JS version 4 but with latest version it is giving me an error.

d3.v6.min.js:2 Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at sb (d3.v6.min.js:2)
    at a (d3.v6.min.js:2)
    at working_with_csv_1.html:41
    at d3.v6.min.js:2
    at d3.v6.min.js:2
    at r (d3.v6.min.js:2)
    at parse (d3.v6.min.js:2)
    at d3.v6.min.js:2

My code is:



    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>D3 SVG LINE CHART</title>
        <style>
    
        </style>
        <script src="https://d3js.org/d3.v6.min.js"></script>
        <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
    
      </head>
      <body>  
        <h3>CSV in D3JS</h3>
        <script>
          var w = 400;
          var h = 100;
          var ds; //global dataset
    
          d3.csv('MonthlySales.csv',
      d3.autoType, function(error, data){
            if(error) 
              console.log(error);
            else {
              console.log(data);
              ds = data;
            }
            var linFunc = d3.line()
                            .x(function(d){ return ((d.month-20130001)/3.25)})
                            .y(function(d) { return h-d.sales})
                            .curve(d3.curveNatural);
            
            var svg = d3.select("body").append("svg")
                                        .attrs({
                                          width: w,
                                          height: h
                                        });
            
            var viz = svg.append("path")
                         .attrs({
                           d: linFunc(ds),
                           "stroke": "red",
                           "stroke-width": 2,
                           "fill": "none"
                         });
            
          });
    
          
        </script>
          
      </body>
    </html>

My CSV file data: [1]: https://i.stack.imgur.com/P6ElF.png

Any clue how I can fix this? Am I using an unstable version of DS JS? Please guide!

Amit
  • 1
  • 1
  • 2
    In D3 v5 and v6, the method to load files with `d3.csv` is different: see [How to load data from a CSV file in D3 v5](https://stackoverflow.com/questions/49599691/how-to-load-data-from-a-csv-file-in-d3-v5). – xy2 Sep 15 '20 at 15:28

0 Answers0