如何在 D3 中检索嵌套数据集的键值

Posted 2023-03-29

【中文标题】如何在 D3 中检索嵌套数据集的键值

【英文标题】：How to retrieve the key values of a nested data set in D3

【发布时间】：2015-09-06 20:44:48

【问题描述】：

我正在尝试将 D3 可视化添加到 OBIEE，我需要完成的第一个图表是多系列折线图。数据直接从 OBIEE 叙述视图中获取，格式如下：

var data = [ ];

data.push(category:"Cat1",date:"20130101",suma:9.11);
data.push(category:"Cat2",date:"20130101",suma:2.66);
data.push(category:"Cat3",date:"20130101",suma:18.00);
data.push(category:"Cat4",date:"20130101",suma:32.49);
data.push(category:"Cat5",date:"20130101",suma:37.74);

有 155 行这样的行，从 2013 年到 2015 年的不同日期。为了按类别将它们分开，然后我可以为每个类别分配一行和颜色，我以这种方式嵌套数据：

var dataGroup = d3.nest() 
.key(function(d) return d.category;) 
.entries(data);

变量 dataGroup 是一个由 5 个对象组成的数组，如下所示：

0: Object
key: "Cat1"
values: Array[31]
    0: Object
       category: "Cat1"
       date: "20130101"
       suma: 9.11
       __proto__: Object
   ... 
   1: Object
   key: "Cat2"
   values: Array[31]
       0: Object
       category: "Cat2"
       date: "20130101"
       suma: 2.66
       __proto__: Object
   ... ...

我接下来要做的是为类别分配颜色。

var color = d3.scale.category10();
color.domain(d3.keys(dataGroup).filter(function(key)  return key !== "date"; ));

这就是我遇到麻烦的地方。这个过滤函数的结果是：

Array[5]
0: "0"
1: "1"
2: "2"
3: "3"
4: "4"
length: 5
__proto__: Array[0]

我认为我需要的是：

Array[5]
0: "Cat1"
1: "Cat2"
2: "Cat3"
3: "Cat4"
4: "Cat5"
length: 5
__proto__: Array[0]

我尝试了几种方法，但都没有奏效。在这一点上，我即将放弃将 D3 添加到 OBIEE，虽然我真的很想实现它，但我很难理解这一点，我似乎完全无法做到。也许我应该首先学习 javascript，也许 D3 似乎需要理解数据管理的思维弯曲对我来说太多了。

我非常感谢您对此的任何帮助。如果我在提交问题时犯了任何错误，我很抱歉，我尝试正确格式化它，但这是我第一次在这里发布任何内容。

非常感谢您和最诚挚的问候， 安娜。

【参考方案1】：

keys() 方法（不是作为nest() 的一部分使用时）用于标准关联数组，而不是嵌套数据。您应该获取dataGroup 的values 并遍历每个以提取category 属性。您的代码中可能存在其他问题，但请尝试

color.domain(d3.values(dataGroup).map(function(d) 
    return d.category; 
).filter(function(key)  return key !== "date"; ));

开始

【讨论】：

不，OP 需要d3.values(dataGroup).map(function(d) return d.category; )。

然后甚至不需要“日期”过滤器，因为该值不会显示为类别:)

可能是真的，但由于 OP 一开始就有过滤器，我假设他预计这可能是必要的。

非常感谢，现在我更了解如何检索数据的密钥了。我现在得到的结果更令人鼓舞。