D3.js如何用饼图可视化每个数据条目？代码无报错却不显示

我帮你梳理下问题所在，主要是这几个关键细节没处理对，导致饼图没渲染出来：

1. Enter阶段缺少容器元素 #

你原来的代码直接对enter()的空选择集调用.each()，但此时还没有创建真实的DOM容器来承载饼图的多个path元素。每个数据条目对应的饼图需要一个父容器（比如<g>元素），用来容纳所有扇区的path。

2. 数据提取逻辑错误 #

d3.values(c).splice(2,5)这行代码有问题：

• d3.values(c)会返回包含ID值在内的所有属性值（比如第一个数据条目会得到["a", 0, 1, 0, 0]）
• splice(2,5)从索引2开始截取，会漏掉A列的值，而且splice是修改原数组的方法，这里应该用slice(1)来获取从A到D的所有值（索引1到数组末尾）。另外如果只想保留值为1的项，还需要加个过滤。

3. 饼图扇区生成方式不对 #

你直接把整个pie数组传给arc()函数，但arc()需要接收单个饼图片段对象（也就是pie数组里的每一项）。正确的做法是遍历pie数组，为每个片段创建对应的<path>元素。

4. 缺少位置定位 #

原来的圆形可能通过cx/cy属性定位，但换成<g>容器后，你需要通过transform属性设置每个饼图的位置，否则所有饼图都会重叠在左上角，自然看不到。

修正后的完整代码示例 #

// 假设你已经获取到data数据，并且有SVG容器（比如var svg = d3.select("svg");）
var course = d3.selectAll(".course")
  .data(data, d => d.ID);

// 处理enter阶段：为每个数据项创建g容器，并设置位置
var courseEnter = course.enter()
  .append("g")
  .attr("class", "course")
  .attr("transform", (d, index) => `translate(${60 + index * 120}, 60)`); // 横向排列饼图，间距120

// 为每个容器生成饼图
courseEnter.each(function(currentData) {
  // 提取A、B、C、D的值，只保留值为1的项
  var targetValues = d3.values(currentData)
    .slice(1) // 去掉ID值，取A-D列
    .filter(value => value === 1);

  // 生成饼图数据
  var pieGenerator = d3.pie()(targetValues);
  // 创建弧生成器
  var arcGenerator = d3.arc()
    .innerRadius(0)
    .outerRadius(15);

  // 为每个饼图扇区创建path元素
  d3.select(this)
    .selectAll("path")
    .data(pieGenerator)
    .enter()
    .append("path")
    .attr("d", arcGenerator)
    .attr("fill", (d, i) => d3.schemeCategory10[i]); // 给不同扇区添加区分色
});

// 处理exit阶段，移除不需要的元素
course.exit().remove();

额外小贴士 #

• 如果需要让扇区对应具体的列名（比如A、B、C），可以用d3.entries(currentData)获取键值对，过滤掉ID和值为0的项，这样后续可以把列名关联到扇区的颜色或tooltip上。
• 确保你的SVG容器有足够的宽高，避免饼图显示在视口外。
• 现在.course类对应的是<g>元素，如果你之前有针对圆形的样式，需要调整样式规则。

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