大佬教程收集整理的这篇文章主要介绍了如何使用 javascript map() 方法展平 d3.nest？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一些用 d3 嵌套的数据。我现在想把它弄平。我正在尝试使用 @H_352_3@map() 方法来执行此操作，但出现错误。
这是我在控制台日志中看到的错误——与第 24 行（我尝试获取 item.values[i].key 的地方）有关：
未捕获（承诺）类型错误：无法读取的属性“key” 未定义
我不知道我哪里出错了，我花了好几个小时在谷歌上搜索。 This question 类似，但没有回答。看起来这应该很简单。
我错过了什么？谢谢！
这是我的代码：
<!DOCTYPE HTML>
<Meta charset="utf-8">
<script src="https://cdn.Jsdelivr.net/npm/axios/dist/axios.min.Js"></script>
<script src="https://d3Js.org/d3.v4.min.Js"></script>
<script>
const mhData = axios.get("https://docs.Google.com/spreadsheets/d/e/2PACX-1vR-MzpkhMmVMkwmhKFvjPyru5LlYPvWo7_xU8ZARbQmDWP9AIh1VXhZ1aWLWR_PgAySq4gobndfpWP0/pub?gID=0&single=true&output=csv")
.then(content => {
const justData = content.data
const csv = d3.csvParse(justData)
const nestedData = d3.nest()
.key(d => d.datE)
.key(d => d.industry)
.rollup(v => d3.sum(v,d => d.value))
.entrIEs(csv)
console.log('nestedData',nestedData)
const flattenData = nestedData.map((item,i) => ({
date: item.key,industry: item.values[i].key,value: item.values[i].value
}));
console.log('flattenData',flattenData)
})
</script>
</body>
</HTML>
在您的代码中：nestedData.map((item,i) => ({...，i 是 nestedData 的索引，而不是 values - 这就是您遇到错误的原因。
您的 nest 返回单层嵌套，例如
nestedData [
{
"key": "2020-01-07","values": [
{
"key": "Tech","value": 1352
},{
"key": "Media","value": 2848
},...
因此在您的 @H_352_3@map 中，您需要一个嵌套的 @H_352_3@map。您还可以将“外部”@H_352_3@map 更改为 flatMap，然后将返回一组对象。
const csv = mockData();
//console.log(csv);
const nestedData = d3.nest()
.key(d => d.datE)
.key(d => d.industry)
.rollup(v => d3.sum(v,d => d.value))
.entries(csv)
//console.log('nestedData',nestedData);
const flattenData = nestedData.flatMap((item,i) => {
const date = item.key;
return item.values.map(industry => ({
date: date,industry: industry.key,value: industry.value
}));
});
console.log('flattenData',flattenData);
function mockData() {
const str = `date,industry,gender,value
2020-01-07,Tech,Men,1004
2020-01-07,Women,348
2020-01-07,Media,2468
2020-01-07,380
2020-01-07,Real Estate,1214
2020-01-07,391
2020-01-14,989
2020-01-14,357
2020-01-14,2430
2020-01-14,393
2020-01-14,1322
2020-01-14,366
2020-01-21,975
2020-01-21,339
2020-01-21,2416
2020-01-21,388
2020-01-21,1336
2020-01-21,3581`;
return d3.csvParse(str);
}.as-console-wrapper { max-height: 100% !important; top: 0; }<script src="https://cdnjs.cloudFlare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
这不是展平 d3.nest 输出的通用方法 - 您需要考虑 n 级嵌套，并且可能需要递归方法。但这应该适用于您的示例。
有一些相关的帖子 here 和 here。
以上是大佬教程为你收集整理的如何使用 javascript map() 方法展平 d3.nest？全部内容，希望文章能够帮你解决如何使用 javascript map() 方法展平 d3.nest？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。