尝试制作 NVD3 图表时出现“a.map 不是函数”错误

Question

我正在尝试用 AngularJS 和 NVD3 制作图表。但我不断收到错误消息。

这是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 时，然后单击 "Update chart" 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。我的代码中是什么导致了这个错误？我该如何解决？

Answer 1

我可以通过告诉您 nvd3Obj 需要是一个数组来帮助您解决当前的错误。现在，如果您使用 (a,b,c\n1,2,3) 作为 CSV 数据，您将收到一个新错误，提示“无法在字符串“1”上创建属性 'series' .

编辑： 我通过使值对象具有 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;
              }
            }
        }
    });

尝试制作 NVD3 图表时出现“a.map 不是函数”错误

`a.map is not a function` error when trying to make NVD3 chart

javascript

angularjs

nvd3.js

angularjs-nvd3-directives