使用d3js构建带扇区的饼图 求相关实现示例

当然可以实现！下面是一个适配你提供的数据的完整示例，能生成类似参考图的带扇区饼图（无需方位标注）：

实现思路 #

我会把每个年份的数据单独生成一个饼图模块并排展示，每个饼图包含对应年份的三个数据扇区，这样能清晰呈现不同年份的分布差异，也符合你给出的数据集结构。

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js Sector Pie Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .pie-container {
            display: flex;
            gap: 50px;
            justify-content: center;
            margin-top: 50px;
        }
        .slice {
            cursor: pointer;
        }
        .slice:hover {
            opacity: 0.8;
        }
        .year-label {
            font-size: 18px;
            font-weight: bold;
            text-anchor: middle;
        }
    </style>
</head>
<body>
    <div class="pie-container"></div>

    <script>
        // 你的原始数据
        const data = [{year:2017, data:[10,20,30]}, {year:2016, data:[20,20,30]}];
        
        // 配置参数
        const width = 300;
        const height = 300;
        const radius = Math.min(width, height) / 2;
        
        // 创建颜色比例尺
        const color = d3.scaleOrdinal()
            .domain([0, 1, 2])
            .range(['#ff7f0e', '#1f77b4', '#2ca02c']);
        
        // 遍历每个年份数据，生成饼图
        data.forEach((yearData, index) => {
            // 创建SVG容器
            const svg = d3.select('.pie-container')
                .append('svg')
                .attr('width', width)
                .attr('height', height)
                .append('g')
                .attr('transform', `translate(${width/2}, ${height/2})`);
            
            // 添加年份标签
            svg.append('text')
                .attr('class', 'year-label')
                .attr('y', radius + 30)
                .text(yearData.year);
            
            // 生成饼图布局
            const pie = d3.pie()
                .value(d => d);
            
            // 生成弧形生成器
            const arc = d3.arc()
                .innerRadius(0) // 实心饼图，若要环形可设置大于0的值
                .outerRadius(radius);
            
            // 绑定数据并绘制扇区
            const slices = svg.selectAll('.slice')
                .data(pie(yearData.data))
                .enter()
                .append('path')
                .attr('class', 'slice')
                .attr('d', arc)
                .attr('fill', (d, i) => color(i))
                .attr('stroke', '#fff')
                .attr('stroke-width', 2);
            
            // 可选：添加扇区数值提示框
            slices.append('title')
                .text(d => `数值: ${d.value}`);
        });
    </script>
</body>
</html>

代码说明 #

• 数据处理：遍历每个年份的数据集，为每个年份创建独立的饼图容器，避免数据混淆
• 饼图核心逻辑：用d3.pie()把原始数值转换成饼图需要的角度数据，d3.arc()负责生成每个扇区的路径形状
• 样式与交互：加了悬停透明度变化的小交互，扇区的白色描边让边界更清晰，年份标签能快速区分不同饼图
• 扩展性：如果想要改成单饼图展示所有数据（把两年的6个数值合并成一个饼图），只需要把数据源改成data.flatMap(item => item.data)即可，非常灵活

你可以直接复制这段代码保存成HTML文件，在浏览器里打开就能看到效果啦！如果要调整成环形饼图、修改配色或者添加扇区标注，只需要修改对应的配置参数就行~

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