D3 Pie Chart颜色不显示问题排查：请求分析代码错误

嘿，我看了你的代码，马上就发现了导致饼图颜色无法正常显示的核心问题！

核心错误点 #

在给饼图路径设置fill属性时，你把颜色数组pcolor当成函数来调用了：

.attr("fill", function(d, i) { 
  console.log(d); 
  return pcolor(i); // 这里错了！
});

pcolor是一个普通数组，访问数组元素应该用方括号索引pcolor[i]，而不是函数调用的语法pcolor(i)。这种错误会让返回值变成undefined，浏览器自然无法渲染出颜色。

修复后的完整代码 #

把颜色访问的语法修正后，颜色就能正常显示了，以下是修复后的完整函数：

function clicked(d,i) { 
  var dataset = [d.females, d.males]; 
  var pcolor = ["green", "pink"]; 
  var outerRadius = 60; 
  var innerRadius = 0; 

  var arc = d3.arc() 
    .innerRadius(innerRadius) 
    .outerRadius(outerRadius); 

  var pie = d3.pie(); 

  //Set up groups 
  var arcs = svg.selectAll("g.arc") 
    .data(pie(dataset)) 
    .enter() 
    .append("g") 
    .attr("class", "arcs") 
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); 

  //Draw arc paths - 修复了颜色访问方式
  arcs.append("path") 
    .attr("d", arc) 
    .attr("fill", function(d, i) { 
      console.log(d); 
      return pcolor[i]; // 改成方括号索引
    }); 

  //Labels 
  arcs.append("text") 
    .attr("transform", function(d) { 
      return "translate(" + arc.centroid(d) + ")"; 
    }) 
    .attr("text-anchor", "middle") 
    .text(function(d) { 
      return d.value; 
    }); 
}

额外检查建议 #

除了这个核心错误，你还可以确认以下几点，确保饼图完全正常工作：

• 确认svg变量已经在外部正确定义并添加到DOM中，比如类似这样的代码：

  var svg = d3.select("body")
    .append("svg")
    .attr("width", outerRadius * 2)
    .attr("height", outerRadius * 2);
  

• 检查d.females和d.males是否是有效的数值类型，空值或非数值会导致饼图渲染异常
• 如果后续要启用注释掉的序数比例尺d3.scaleOrdinal，记得比例尺是函数，要用color(i)来获取颜色，这和数组的访问方式是相反的哦

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