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

【问题标题】：How would I import a single column CSV file into a pie chart using Javascript D3?如何使用 Javascript D3 将单列 CSV 文件导入饼图？
【发布时间】：2021-01-06 15:08:30
【问题描述】：

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

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

希望我说得通！ :)

谢谢。

【问题讨论】：

标签： javascript csv d3.js

【解决方案1】：

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

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

d3.rollup 将 reduce 具有指定 reducer 的任何组：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"))

&lt;script src="https://d3js.org/d3.v6.min.js"&gt;&lt;/script&gt;

【讨论】：