如何使用 Javascript D3 將單列 CSV 文件導入餅圖？

Question

希望我能正確解釋自己，因為我是 JS 新手，但我需要導入一個 CSV 文件作為餅圖的數據。 我的 csv 文件只是一列，標題為“類型”，並且值並不完全相同。 共有三種類型：中、低、高，總共有 63 個值。

我目前正在做的是 d3.csv("types.csv")。 在這一步之后，我不知道如何讓它將數據讀取為 3 個單獨的值。 那么，我該怎么做呢？ 我可以讓它迭代對象數組並增加一個空數組並獲取餅圖以將其用作數據嗎？ 偽代碼示例：var types = {} foreach type +1 types 以 var types = {Low: 2, Medium: 4, High: 10} 結束，然后將其解析為餅圖。

希望我說的有道理！ :)

謝謝你。

Answer 1

您可以使用d3.rollup ，它將組減少為一個值，並返回一個ES6 Map 。

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

d3.rollup將使用指定的 reducer減少任何組：組由d3.rollup函數確定。

我們用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 ）並應用該函數，將數組轉換為一個值。 這里將取每個組的長度：對於低組，它將返回 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>