基于D3.js V6实现JSON数据导入并在饼图扇区显示大百分比标题

嘿，我来帮你搞定这个饼图百分比标题的需求！你已经完成了饼图和图例的绘制，现在只需要在每个扇区的中心位置添加对应的大百分比文本就可以了，而且完全可以直接从你提供的JSON数据里读取Percent字段来实现。

实现步骤说明 #

1. 获取扇区中心位置：D3的arc.centroid()方法可以帮我们计算每个饼图扇区的中心坐标，这是放置文本的关键位置。
2. 绑定数据并添加文本元素：和绘制路径一样，我们需要把饼图角度数据绑定到文本元素上，然后设置文本的位置、样式和内容。
3. 格式化百分比显示：为了让百分比显示更美观，可以用D3的格式化函数把数值处理成带一位小数（或者你想要的格式）并加上百分号。

修改后的完整代码 #

下面是更新后的drawPie函数，我标注了新增的百分比文本部分：

// 绘制饼图
function drawPie(data) {
 colourScale.domain(data.map(d=>d.name))
 const angles = pie(data)
 const paths = pieCanvas.selectAll("path").data(angles)
 paths.enter().append("path").attr("d", arcPath).attr("class","arc")
 .attr("stroke","white").attr("fill", d=>colourScale(d.data.name))

 // ------------------- 新增：添加扇区大百分比标题 -------------------
 const labels = pieCanvas.selectAll(".percent-label").data(angles)
 labels.enter()
   .append("text")
   .attr("class", "percent-label")
   // 把文本定位到扇区中心
   .attr("transform", d => `translate(${arc.centroid(d)})`)
   // 设置文本样式：大字体、居中、白色（可根据扇区颜色调整）
   .style("font-size", "20px")
   .style("text-anchor", "middle")
   .style("fill", "white")
   .style("font-weight", "bold")
   // 格式化百分比显示，保留1位小数并添加百分号
   .text(d => `${d3.format(".1f")(d.data.Percent)}%`)
 // ------------------- 新增部分结束 -------------------

 // 添加图例
 const legend = svg.selectAll('.legend').data(colourScale.domain()).enter().append('g')
 .attr('class', 'legend').attr('transform', function(d, i) {
 const height = legendRectSize + legendSpacing
 const offset = height * colourScale.domain().length / 3
 const horz = 20 * legendRectSize
 const vert = i * height - offset + 260
 return 'translate(' + horz + ',' + vert + ')'});
 legend.append('rect').attr('width', legendRectSize).attr('height', legendRectSize)
 .style('fill', colourScale).style('stroke', colourScale)
 legend.append('text').attr('x', legendRectSize + legendSpacing)
 .attr('y', legendRectSize - legendSpacing).text(function(d) { return d })
}

关键细节说明 #

• arc.centroid(d)：这个方法返回当前扇区的中心坐标数组[x, y]，我们用translate把文本移动到这个位置。
• 文本样式：你可以根据目标饼图的效果调整font-size、fill（颜色）等样式，比如如果扇区颜色较浅，就把文本改成深色，保证可读性。
• 百分比格式化：d3.format(".1f")会把数值保留1位小数，如果你想要整数百分比，可以改成d3.format(".0f")。

这样修改后，每个饼图扇区就会显示对应的大百分比标题，完全从你的JSON数据里读取Percent字段，不需要额外创建HTML元素~

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