【问题标题】:nvd3 pie chart says Uncaught TypeError: Cannot call method 'map' of undefinednvd3 饼图显示 Uncaught TypeError: Cannot call method 'map' of undefined
【发布时间】:2013-06-17 21:57:43
【问题描述】:

这是 plunker - http://plnkr.co/edit/pXitfqb8K2IbxOHXw0uL?p=preview

是否记录正确的值,但不构建饼图。
相反,我可以在日志中看到以下内容

nvd pie -  {"values":[{"parent":"Food","amount":116.1},{"parent":"Home","amount":670.14},{"parent":"Travel","amount":365.24},{"parent":"Taxes","amount":31.240000000000002},{"parent":"Entertainment","amount":13.24}]} script.js:166
Uncaught TypeError: Cannot call method 'map' of undefined nv.d3.js:9623

我该如何解决这个问题?

【问题讨论】:

    标签: javascript d3.js nvd3.js


    【解决方案1】:

    查看 nv.d3.js 中的第 9623 行,您会发现 map 方法是在数组的第一个元素上调用的,而您的数据是一个对象。

    您需要做的是将您的值封装在一个 1 元素数组中:

    var data = [{ 
      key : "",
      values : [{"parent":"Food","amount":116.1},{"parent":"Home","amount":670.14},{"parent":"Travel","amount":365.24},{"parent":"Taxes","amount":31.240000000000002},{"parent":"Entertainment","amount":13.24}] 
    }];
    

    【讨论】:

    • 我相信这是 NVd3 饼图中的错误。它应该使用提供的值方法来访问值,而不是假设它是一个数组。但是这种解决方法很好,直到有人开始修补它。
    • 即使在示例中,我也不认为这是一个错误,数据被封装在一个元素数组中。不知道为什么要这样设计。
    • 当我阅读 pie.js 的源代码时,我看到了一个值访问器,PieChart.js 应该使用它来访问您希望使用的数组。我相信@daydreamer 应该能够说 chart.values(function(d){ return d.values;}) 如果那是他想要返回的数组。也许,我看到的东西完全不相关。 :]
    【解决方案2】:

    我为此苦苦挣扎了一段时间,主要是因为我从 nvd3.org 网站上的实时示例开始。

    事实证明,现场示例中的数据格式与核心 nvd3 下载捆绑的示例中的数据格式不同。

    在下载的pie.html示例中,数据指定如下:

    var testdata = [
    { 
      key: "One",
      y: 5
    },
    { 
      key: "Two",
      y: 2
    },
    { 
      key: "Three",
      y: 9
    }
    ];
    

    然后当通过它传递数据时,它被包装在一个未命名/键控的数组中......

    d3...datum([testdata])....
    

    这种格式适合我。

    【讨论】:

    • 我已经搜索了大约 8 个小时......你让我很开心!非常感谢,cheerioh!
    【解决方案3】:

    经过几个小时的努力,我终于解决了这个问题。

    请查看http://plnkr.co/edit/qJnZzBS4ZOUtD2q9FV11?p=preview 了解其工作原理

    【讨论】:

      猜你喜欢
      • 2013-01-15
      • 2013-05-02
      • 2023-03-09
      • 1970-01-01
      • 2017-04-24
      • 2021-11-10
      • 1970-01-01
      • 2012-02-10
      • 1970-01-01
      相关资源
      最近更新 更多