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

Question

希望我能正确解释自己，因为我是 JS 的新手，但我需要导入一个 CSV 文件作为饼图的数据。我的 csv 文件只有一列，标题为“类型”，并且值并不完全相同。分为中、低、高三种类型，共63个值。

我目前正在做的是 d3.csv("types.csv")。在这一步之后，我不知道如何让它将数据读取为 3 个单独的值。那么，我该怎么做呢？我可以让它遍历对象数组并递增一个空数组并让饼图将其用作数据吗？伪代码示例: 变量类型 = {} foreach类型 +1 类型 以结束 var types = {低:2，中:4，高:10} 然后将其解析为饼图。

希望我说得有道理! :)

谢谢。

Answer 1

您可以使用 d3.rollup ，将组减少为一个值，并返回 ES6 Map .

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

d3.rollup 将使用指定的缩减器缩减任何组:组由 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>