D3.v4饼图仅显示文本标签不显示扇区问题求助

嘿，我帮你定位到问题啦！你的饼图只有文字标签显示、扇区不出现，主要是两个关键小错误导致的，咱们一步步来修正：

问题1：变量名冲突覆盖了弧生成器 #

你在代码里重复使用了arc这个变量名：

• 第一次是创建D3的弧生成器：var arc = d3.arc().outerRadius(radius - 10).innerRadius(0);
• 第二次又用这个变量名来选择DOM元素：var arc = g.selectAll(".arc")...

这就导致原本负责生成扇区路径的弧生成器被覆盖了，后面绘制path的时候根本没法调用正确的工具来创建图形。

修复方法：把第二个变量名改成别的，比如var arcs，避免变量冲突。

问题2：Path元素缺少核心的d属性 #

SVG的path标签必须通过d属性获取路径指令，才能知道要绘制什么形状。你的代码里只设置了填充色和描边，却没有调用弧生成器把饼图数据转换成路径字符串。

修复方法：给path元素加上.attr("d", arc)（这里的arc是咱们一开始定义的弧生成器）。

额外优化：更可靠的文本与颜色获取 #

原来的代码里用InternetUsage[i].usage来获取标签和颜色，其实D3的pie函数处理后的数据里自带data属性指向原数据项，直接用d.data.usage会更可靠，不用依赖索引i的准确性。

修复后的完整代码 #

var width = 950 
var height = 500; 
var radius = 250; 

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

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

var color = d3.scaleOrdinal(d3.schemeCategory20c); 

// 弧生成器，保留原变量名
var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0); 

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40); 

var pie = d3.pie()
    .value(function(d) { return d.number ;}); 

var InternetUsage = [{usage:"no time at all", number:3}, {usage:"less than an hour a day", number:139}, {usage:"few hours a day", number:740}, {usage:"most of the day", number:122}]; 

// 改名避免变量冲突
var arcs = g.selectAll(".arc")
    .data(pie(InternetUsage))
    .enter()
    .append("g")
    .attr("class", "arc"); 

arcs.append("path")
    .attr("stroke", "#fff")
    .attr("d", arc) // 添加d属性，调用弧生成器生成路径
    .style("fill", function(d) { 
        return color(d.data.usage); // 从处理后的数据中获取原数据的usage值
    }); 

arcs.append("text")
    .attr("transform", function(d){return "translate(" + label.centroid(d) + ")"; })
    .style("font-size","10px")
    .attr("dy", "0.35em")
    .attr('text-anchor', 'middle')
    .text(function(d) {
        return d.data.usage; // 从处理后的数据中获取原数据的usage值
    }); 

现在运行这段代码，你的饼图扇区应该就能正常显示啦，每个扇区也会按照usage值分配对应范围内的颜色~

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