如何使用Javascript D3将单列CSV文件导入饼图？

Question

希望我能表达清楚，因为我是JS新手，但我需要导入一个CSV文件作为饼图的数据。我的CSV文件只有一列，标题为“Type”，值并不相同。总共有三种类型：中、低、高，共有63个值。

目前我正在执行的步骤是d3.csv（“types.csv”）。在这一步之后，我不知道如何将它读取为3个单独的值。那么，我该怎么做呢？可以让它遍历对象数组并增加一个空数组，然后将其用作数据来制作饼图吗？伪代码示例：

var types = {} foreach type +1 types

最终得到： var types = {Low: 2, Medium: 4, High: 10}

然后将其解析为饼图。

希望我表述得清楚！:) 谢谢。

- spook

Answer 1

你可以使用d3.rollup，它将分组缩减为一个值，并返回一个ES6 Map。

d3.rollup(data, v => v.length, d => d.type)
//              reducer       grouper

d3.rollup会使用指定的reducer来reduce任何分组: groups由grouper函数确定。

我们使用d => d.type进行分组，因此具有相同类型的任何值都在同一组中。分组后，您将拥有一个如下所示的Map：

d3.group(data, d => d.type) 
== 
Map(3) {
  "High" => Array(1) // of objects
  "Medium" => Array(2)
  "Low" => Array(4)
}

然后，我们使用 v => v.length 来缩小每个组。d3会取出我们刚创建的每个组（每个 Map），并应用该函数将数组转换为一个值。这里它将获取每个组的长度：对于 Low 组，它将返回 4，因为该组中有四个条目。

const data = d3.csvParse(`type,value
Medium,7,2
Medium,5
Low,0.2
Low,3.4
High,2
Low,1
Low,1`)

const grouped =
  d3.rollup(data, v => v.length, d => d.type)
  
console.log("Low:",    grouped.get("Low"))
console.log("Medium:", grouped.get("Medium"))
console.log("High:",   grouped.get("High"))

<script src="https://d3js.org/d3.v6.min.js"></script>

- Hugo Elhaj-Lahsen