当前位置：首页 > news >正文

「数据可视化 D3系列」入门第十章：饼图绘制详解与实现

news 来源：原创 2025/4/25 12:55:04

饼图绘制详解与实现

- 一、饼图绘制核心知识
- - 1. d3.arc() 弧形生成器
  - 2. d3.pie() 布局函数
  - 3. arc.centroid() 中心点计算
  - 4. 颜色方案
- 二、饼图实现代码
- 小结
- - 核心知识点
  - 下章预告：力导向图

一、饼图绘制核心知识

1. d3.arc() 弧形生成器

功能： 生成圆形、扇形或环形路径
核心参数：
- innerRadius：内半径（0时为实心饼图）
- outerRadius：外半径
- cornerRadius：圆角半径（创建圆角扇形）
- padAngle：扇形间隔角度

const arc = d3.arc().innerRadius(50).outerRadius(100).cornerRadius(5); // 添加圆角效果

2. d3.pie() 布局函数

功能： 将原始数据转换为角度数据
特点：
- 自动计算每个数据项的起始/结束角度
- 支持排序功能（pie.sort()）
- 可设置起始角度（pie.startAngle()）

const pie = d3.pie().sort(null) // 禁用排序.value(d => d); // 指定数据访问器

3. arc.centroid() 中心点计算

数学原理： [(startAngle + endAngle)/2, (innerRadius + outerRadius)/2]
应用场景：
- 标签定位
- 交互元素定位
- 动画中心点

4. 颜色方案

d3.schemeCategory10：10种分类颜色
其他方案：
- d3.schemeAccent：8种强调色
- d3.schemeSet3：12种柔和色

二、饼图实现代码

👇 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>交互式饼图</title><script src="https://d3js.org/d3.v7.min.js"></script><style>.tooltip {position: absolute;padding: 8px;background: rgba(0,0,0,0.8);color: white;border-radius: 4px;pointer-events: none;font-size: 12px;}.chart-title {text-anchor: middle;font-size: 16px;font-weight: bold;}</style>
</head>
<body><svg width="500" height="450"></svg><div class="tooltip"></div><script>// 配置参数const config = {margin: {top: 50, right: 30, bottom: 30, left: 30},innerRadius: 60,outerRadius: 120,cornerRadius: 5,padAngle: 0.02};// 准备数据const data = [{name: "类别A", value: 56},{name: "类别B", value: 21},{name: "类别C", value: 11},{name: "类别D", value: 85},{name: "类别E", value: 42},{name: "类别F", value: 66}];// 初始化SVGconst svg = d3.select('svg');const width = +svg.attr('width');const height = +svg.attr('height');const chartWidth = width - config.margin.left - config.margin.right;const chartHeight = height - config.margin.top - config.margin.bottom;const tooltip = d3.select('.tooltip');// 创建图表容器const g = svg.append('g').attr('transform', `translate(${config.margin.left + chartWidth/2}, ${config.margin.top + chartHeight/2})`);// 添加标题svg.append('text').attr('class', 'chart-title').attr('x', width/2).attr('y', 30).text('数据分布饼图');// 颜色比例尺const colorScale = d3.scaleOrdinal().domain(data.map(d => d.name)).range(d3.schemeCategory10);// 饼图布局const pie = d3.pie().sort(null).value(d => d.value);// 弧形生成器const arc = d3.arc().innerRadius(config.innerRadius).outerRadius(config.outerRadius).cornerRadius(config.cornerRadius).padAngle(config.padAngle);// 外环弧形（用于鼠标事件）const outerArc = d3.arc().innerRadius(config.outerRadius * 1.02).outerRadius(config.outerRadius * 1.2);// 生成饼图数据const arcs = pie(data);// 绘制扇形const slices = g.selectAll('.slice').data(arcs).enter().append('g').attr('class', 'slice');slices.append('path').attr('d', arc).attr('fill', (d,i) => colorScale(d.data.name)).attr('stroke', '#fff').attr('stroke-width', 1).on('mouseover', function(d) {d3.select(this).transition().duration(200).attr('opacity', 0.8).attr('stroke-width', 2);tooltip.transition().duration(200).style('opacity', 1);tooltip.html(`${d.data.name}: ${d.data.value} (${((d.endAngle - d.startAngle)/(2*Math.PI)*100).toFixed(1)}%)`).style('left', (d3.event.pageX + 10) + 'px').style('top', (d3.event.pageY - 28) + 'px');}).on('mouseout', function() {d3.select(this).transition().duration(200).attr('opacity', 1).attr('stroke-width', 1);tooltip.transition().duration(200).style('opacity', 0);}).on('click', function(d) {alert(`点击了${d.data.name}分类，值为${d.data.value}`);});// 添加标签slices.append('text').attr('transform', d => `translate(${arc.centroid(d)})`).attr('dy', '0.35em').attr('text-anchor', 'middle').text(d => d.data.value).style('fill', '#fff').style('font-size', '12px').style('pointer-events', 'none');// 添加引导线const polyline = slices.append('polyline').attr('points', function(d) {const pos = outerArc.centroid(d);pos[0] = config.outerRadius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);return [arc.centroid(d), outerArc.centroid(d), pos];}).attr('stroke', '#999').attr('stroke-width', 1).attr('fill', 'none');// 添加分类名称slices.append('text').attr('transform', function(d) {const pos = outerArc.centroid(d);pos[0] = config.outerRadius * 0.99 * (midAngle(d) < Math.PI ? 1 : -1);return `translate(${pos})`;}).attr('dy', '0.35em').attr('text-anchor', function(d) {return midAngle(d) < Math.PI ? 'start' : 'end';}).text(d => d.data.name).style('font-size', '11px');// 辅助函数：计算中间角度function midAngle(d) {return d.startAngle + (d.endAngle - d.startAngle)/2;}
</script>
</body>
</html>