如何用D3.js对CSV重复名称分组统计并生成带计数的Div

完全可以用D3.js实现你的需求，你的思路方向是对的，问题出在数据处理和DOM渲染的细节上，下面是具体的修正方案：

问题分析 #

你当前代码的核心问题：

1. 分组逻辑错误：d3.nest()的key函数用了d.value，但从你的CSV示例来看，分组依据应该是location列（即"Base 1"这类名称）；
2. 数据属性误用：d3.nest()配合rollup后，统计结果存在d.value属性中，分组名称存在d.key里，你之前错误调用了d.values；
3. 选择器使用不当：绑定新数据时，选择了已存在的.imgContainer类，导致enter()无法正确创建新元素。

完整实现代码 #

1. 加载并处理CSV数据 #

// 加载CSV文件，注意替换为你的文件路径
d3.csv("your-data-file.csv").then(function(rawData) {
  // 按location列分组，统计每组的条目数量
  const groupedData = d3.nest()
    .key(d => d.location) // 以CSV中的location列为分组依据
    .rollup(group => group.length) // 统计每组的数量
    .entries(rawData);

  // 控制台查看处理后的数据格式：[{key: "Base 1", value: 20}, {key: "Base 2", value: 80}, ...]
  console.log(groupedData);

2. 渲染分组结果到Div #

// 选择目标容器，绑定处理好的数据
  const container = d3.select(".container");
  container.selectAll(".base-stat-div")
    .data(groupedData)
    .enter()
    .append("div")
    .attr("class", "base-stat-div")
    .attr("id", d => `base-${d.key.replace(/\s/g, "-")}`) // 生成合法的DOM ID，比如base-Base-1
    .html(d => `${d.key}: ${d.value}`); // 直接渲染名称和对应计数
});

关键修正说明 #

• 分组键修正：将d.value改为d.location，匹配CSV中的分组列；
• 数据属性调用：d.key是分组的名称（如"Base 1"），d.value是统计的数量（如20），渲染时需同时使用这两个属性；
• 选择器规范：绑定新数据时使用不存在的类名（如.base-stat-div），确保enter()能正确创建新的Div元素。

效果验证 #

如果你的CSV数据结构如下：

运行代码后，容器内会生成如下DOM结构：

<div class="base-stat-div" id="base-Base-1">Base 1: 20</div>
<div class="base-stat-div" id="base-Base-2">Base 2: 80</div>
...

内容的提问来源于stack exchange，提问作者TonyT