首页 > 解决方案 > d3 JS 版本 6 d3.v6.min.js:2 Uncaught (in promise) TypeError

问题描述

我正在使用最新版本 6 学习 D3 JS。我正在尝试从外部文件中获取 CSV 数据,如果使用 D3 JS 版本 4,它运行良好,但使用最新版本时会出现错误。

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

我的代码是:



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

我的 CSV 文件数据:[1]:https ://i.stack.imgur.com/P6ElF.png

有什么线索我可以解决这个问题吗?我使用的是不稳定版本的 DS JS 吗?请指导!

标签: d3.js

解决方案


推荐阅读