使用不带组头的 d3.group 从 csv 创建数组答案

【问题标题】：Creating array from csv with d3.group without group headers使用不带组头的 d3.group 从 csv 创建数组
【发布时间】：2021-08-13 16:14:04
【问题描述】：

我正在尝试复制 Nadieh Bremer 的示例 here，这是用 D3.js 制作的雷达图。

Nadieh 示例中使用的数据结构是：

var data = [
  [//iPhone
    {axis:"Battery Life",value:20},
    {axis:"Brand",value:28},
    {axis:"Contract Cost",value:29},
    {axis:"Design And Quality",value:17},
    {axis:"Have Internet Connectivity",value:22},
    {axis:"Large Screen",value:02},
    {axis:"Price Of Device",value:21},
    {axis:"To Be A Smartphone",value:50}            
  ],[//Samsung
    {axis:"Battery Life",value:27},
    {axis:"Brand",value:16},
    {axis:"Contract Cost",value:35},
    {axis:"Design And Quality",value:13},
    {axis:"Have Internet Connectivity",value:20},
    {axis:"Large Screen",value:13},
    {axis:"Price Of Device",value:35},
    {axis:"To Be A Smartphone",value:38}
  ],etc.
];

我想从一个设置如下的 CSV 文件中引入数据：

axis,value,type
Battery Life,20,iPhone
Brand,28,iPhone
Contract Cost,29,iPhone
Design And Quality,17,iPhone
Have Internet Connectivity,22,iPhone
Large Screen,02,iPhone
Price Of Device,21,iPhone
To Be A Smartphone,50,iPhone    
Battery Life,27,SAmsung
Brand,16,SAmsung
...etc.

在我的脚本中，我有：

var tmpArr;
    d3.csv("data1.csv", (d) => {
    tmp = d;
    tmpArr = Array.from(d3.group(tmp, d => d.group));
    console.log(tmpArr);
});

这显然会为每个组返回一个数组，其中组的标题作为数组的第一个元素，然后组的内容作为数组中的第二个元素。

如果能帮助我删除第一个元素，我将不胜感激，这样我就可以简单地返回一个我需要的值数组。我很确定我需要使用d3.map()，但我就是不知道该怎么做。提前致谢。

【问题讨论】：

标签： javascript arrays d3.js

【解决方案1】：

您可以只使用标准的.map 并为从Array.from(d3.group(...)) 返回的每一对返回该对的第二项。对于每对中的第二个项目，使用索引[1]，因为数组是从零开始的索引。

工作示例与 Nadieh Bremer 块中的数据结构对齐：

const csv = `axis,value,type
Battery Life,20,iPhone
Brand,28,iPhone
Contract Cost,29,iPhone
Design And Quality,17,iPhone
Have Internet Connectivity,22,iPhone
Large Screen,02,iPhone
Price Of Device,21,iPhone
To Be A Smartphone,50,iPhone
Battery Life,27,SAmsung
Brand,16,SAmsung
Contract Cost,24,SAmsung
Design And Quality,14,SAmsung
Have Internet Connectivity,22,SAmsung
Large Screen,05,SAmsung
Price Of Device,15,SAmsung
To Be A Smartphone,48,SAmsung
`;

const data = d3.csvParse(csv);

const grouped = Array.from(d3.group(data, d => d.type));

const arrForViz = grouped.map(g => g[1]);

console.log(arrForViz);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"&gt;&lt;/script&gt;

【讨论】：