Uncaught (in promise) TypeError: d3.group is not a function答案

【问题标题】：Uncaught (in promise) TypeError: d3.group is not a functionUncaught (in promise) TypeError: d3.group is not a function
【发布时间】：2020-07-26 04:58:38
【问题描述】：

我有一个口袋妖怪数据集，我想按类型对它们进行分组。所以会有一组类型为火、水、草等的口袋妖怪......并且d3.js有一个名为d3.group的函数。

在文档中它声明 Groups 将指定的值迭代到 Map 从键到值数组。我尝试关注此observable tutorial，但我不断收到错误Uncaught (in promise) TypeError: d3.group is not a function

我不知道我做错了什么。这是我的代码。 bar_chart.js

drawBarChart = async() => {
  // 1. Access the data
  const dataset = await d3.csv('./pokemon.csv');
  console.log(dataset);

  pokemon = d3.group(dataset, d => d.type1)


  const metricAccesor = d => d.type1;

  // 2. create the dimensions
  const width = 600;
}

drawBarChart()

<!DOCTYPE HTML>
<html>

<head>

</head>

<body>
  <div id="wrapper"></div>
  <script src="http://d3js.org/d3.v5.min.js"></script>
  <script src="./bar_chart.js"></script>

</body>

</html>

Pokemon dataset from Kaggle

这是我在github上的代码

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

API 并不完全清楚：d3-array 迷你库中的一些新功能，如提到的d3.group，在捆绑包中不可用：

console.log(d3.group)

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

因此，在这种情况下，您必须引用 standalone 库：

console.log(d3.group)

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

因此，这就是您在<body> 末尾所需要的：

<div id="wrapper"></div>
<script src="http://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="./bar_chart.js"></script>

【讨论】：

【解决方案2】：

或者，尝试使用 D3 Nest 命令，这对我来说不需要加载任何其他库。

https://bl.ocks.org/phoebebright/raw/3176159/

    .then(function (dataset) {
        return d3.nest()
            .key(function(d) { return d.type1; })
            .entries(dataset);

【讨论】：