嘗試製作NVD3圖表時，a.map不是函數錯誤

我試圖用AngularJS和NVD3製作圖表。但我不斷收到錯誤。嘗試製作NVD3圖表時，a.map不是函數錯誤

這裏的index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     div.square { 
      background-color: #ccc; 
      height: 400px; 
      width: 400px; 
      margin: 10px; 
     } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"></script> 
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <div ng-repeat="item in items"> 
    <br> 
    <form id="{{'customize-chart-' + item.number}}" novalidate> 
     <textarea rows="5" cols="50" placeholder="Paste comma-separated data here." ng-model="textModel"></textarea> 
     <br> 
     <button id="{{'update-chart-' + item.number}}" ng-click="updateChart(item.number)">Update chart</button> 
    </form> 
    </div> 
    <div ng-repeat="item in items"> 
    <div class="square"> 
     <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3> 
    </div> 
    </div> 
</body> 
</html>

這裏的app.js「

var app= angular.module("myApp",["nvd3"]); 
app.controller("myCtrl",function($scope){ 
    $scope.items= [ 
     { 
      hed: '', 
      subhed: '', 
      number: chNum 
     } 
    ]; 

    $scope.textModel= ''; 

    $scope.updateChart= function(passedItemNumber){ 
     var csvData= d3.csv.parse(this.textModel); 
     var headers= d3.keys(csvData[0]); 
     var nvd3Obj= {}; 

     headers.forEach(function(d){ 
      nvd3Obj[d]= []; 
     }); 

     csvData.forEach(function(d){ 
      for(var key in d){ 
       nvd3Obj[key].push(d[key]); 
      } 
     }); 

     $scope.options = { 
      "chart": { 
       "type": "lineChart", 
       "height": 400, 
       "margin": { 
        "top": 20, 
        "right": 20, 
        "bottom": 40, 
        "left": 55 
       }, 
       "x": function(d) { 
        console.log(d); 
        return d[0]; 
       }, 
       "y": function(d) { 
        return d[1]; 
       }, 
       "useInteractiveGuideline": true, 
       "dispatch": {}, 
       "xAxis": { 
        "axisLabel": "X axis" 
       }, 
       "yAxis": { 
        "axisLabel": "Y axis"//, 
        // "axisLabelDistance": -10 
       } 
      } 
     }; 

     $scope.data= nvd3Obj; 
    }; 
});

這就是我貼到textarea標籤

date,dow,sp500,nasdaq 
1/1/16,10,15,8 
1/3/16,5,3,7 
1/5/16,12,18,12

當我粘貼到textarea，然後單擊。「更新圖表」button，這個錯誤出現在我的瀏覽器的控制檯中。

angular.js:14290 TypeError: a.map is not a function 
    at nv.d3.min.js:5 
    at g (nv.d3.min.js:2) 
    at update (nv.d3.min.js:2) 
    at SVGSVGElement.<anonymous> (nv.d3.min.js:4) 
    at d3.min.js:3 
    at Y (d3.min.js:1) 
    at Array._a.each (d3.min.js:3) 
    at Array.b (nv.d3.min.js:4) 
    at Array._a.call (d3.min.js:3) 
    at Object.updateWithData (angular-nvd3.js:229)

錯誤沒有引用我的腳本，app.js。我的代碼中有什麼會導致這個錯誤？我如何解決它？

來源

2016-12-15 Username

您可以刪除縮小版本的d3＆nvd3，以便在錯誤輸出中獲得更好的變量名稱嗎？ – Stephen

已更新@Stephen – Username

我可以通過告訴你你的nvd3Obj需要是一個數組來讓你過去當前的錯誤。如果您使用（a，b，c \ n1,2,3）作爲您的CSV數據，現在您將在字符串'1'中得到一個新錯誤，說'無法創建屬性'系列'。

編輯：我通過使值對象具有x，y屬性來超過第二個錯誤。 { x: d[k], y: 0 }。希望這會幫助你回到解決你的其他問題。這是我使用的代碼的一個plnkr。 http://plnkr.co/edit/q1apvHlChaXvdsqzlXlM?p=preview

var csvData= d3.csv.parse(this.textModel); 
    var headers= d3.keys(csvData[0]); 
    var nvd3Obj= []; 
    headers.map(function (heading, index) { 
     nvd3Obj[index] = { "key": heading }; 
    }) 
    csvData.forEach(function(d){ 
     for(var k in d){ 
      for(var i = 0; i < nvd3Obj.length; i++) { 
       var obj = nvd3Obj[i]; 
       if (obj.key === k) { 
       if (!obj.values) { 
        obj.values = [{ x: d[k], y: 0 }]; 
       } else { 
        obj.values.push({ x: d[k], y: 0 }); 
       } 
       break; 
       } 
      } 
     } 
    });

來源

2016-12-15 23:45:58 Stephen

嘗試製作NVD3圖表時，a.map不是函數錯誤

回答

相關問題