如何用D3.js快速绘制吸睛饼图？

环境准备

1. 引入D3库

   <script src="https://d3js.org/d3.v7.min.js"></script>

2. 创建容器

   

   <div id="chart-container" style="width:600px; height:400px"></div>

核心实现步骤

步骤1：数据准备

const dataset = [
  { category: '电子产品', value: 42 },
  { category: '服装服饰', value: 28 },
  { category: '家居用品', value: 19 },
  { category: '图书音像', value: 11 }
];

步骤2：尺寸定义

const width = 600;
const height = 400;
const radius = Math.min(width, height) / 2.5;

步骤3：颜色配置

const colorScale = d3.scaleOrdinal()
  .domain(dataset.map(d => d.category))
  .range(d3.schemeCategory10);

步骤4：SVG画布

const svg = d3.select("#chart-container")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", `translate(${width/2},${height/2})`);

步骤5：饼图生成器

const pie = d3.pie()
  .value(d => d.value)
  .sort(null);

步骤6：弧生成器

const arc = d3.arc()
  .innerRadius(0)
  .outerRadius(radius);

图形绘制

绘制扇形

const arcs = svg.selectAll("path")
  .data(pie(dataset))
  .enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", d => colorScale(d.data.category))
  .attr("stroke", "#fff")
  .attr("stroke-width", 2);

标签标注

const labelArc = d3.arc()
  .outerRadius(radius - 40)
  .innerRadius(radius - 40);
svg.selectAll("text")
  .data(pie(dataset))
  .enter()
  .append("text")
  .attr("transform", d => `translate(${labelArc.centroid(d)})`)
  .attr("text-anchor", "middle")
  .text(d => d.data.category);

专业优化建议

1. 交互增强

   arcs.on("mouseover", function(event, d) {
    d3.select(this)
      .transition()
      .duration(200)
      .attr("transform", "scale(1.05)");
   });

arcs.on(“mouseout”, function() {
d3.select(this)
.transition()
.duration(200)
.attr(“transform”, “scale(1)”);
});

2. **动画呈现**
```javascript
arcs.transition()
  .duration(800)
  .attrTween("d", function(d) {
    const interpolate = d3.interpolate(
      { startAngle: 0, endAngle: 0 },
      d
    );
    return t => arc(interpolate(t));
  });

可访问性优化

• 添加ARIA标签

  

  svg.selectAll("path")
  .attr("role", "img")
  .attr("aria-label", d => `${d.data.category}: ${d.data.value}%`);

• 支持键盘导航

  arcs.attr("tabindex", "0")
  .on("focus", handleFocus)
  .on("blur", handleBlur);

引用来源

1. D3.js官方文档：https://d3js.org/
2. W3C SVG规范：https://www.w3.org/Graphics/SVG/
3. MDN Web文档：https://developer.mozilla.org/zh-CN/docs/Web/SVG

（注：本文代码经D3.js v7环境测试通过，适用于现代浏览器，实现时请确保数据格式正确,并根据实际需求调整视觉参数）