nvd3 饼图显示 Uncaught TypeError: Cannot call method 'map' of undefined答案

【问题标题】：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 了解其工作原理

【讨论】：