如何用D3.js v4轻松生成动态饼图？

<div class="article-content">
    <p>在数据可视化领域，<strong>D3.js</strong>（Data-Driven Documents）是一个功能强大的JavaScript库，尤其适合创建动态、交互式的图表，本文将详细讲解如何使用D3.js v4版本绘制一个基础的饼图，并提供优化建议以满足现代网页开发需求。</p>
    <h3>一、准备工作</h3>
    <p>在开始前，需确保已引入D3.js v4库：</p>
    <pre><code class="language-html">&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;</code></pre>
    <p>准备示例数据集：</p>
    <pre><code class="language-javascript">const dataset = [
    { label: '分类A', value: 30 },
    { label: '分类B', value: 45 },
    { label: '分类C', value: 25 }
];</code></pre>
    <h3>二、创建SVG容器</h3>
    <p>定义画布尺寸并插入SVG元素：</p>
    <pre><code class="language-javascript">const width = 500,
      height = 500,
      radius = Math.min(width, height) / 2;
const svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', `translate(${width/2},${height/2})`);</code></pre>
    <h3>三、构建饼图布局</h3>
    <p>使用<code>d3.pie()</code>和<code>d3.arc()</code>生成图表结构：</p>
    <pre><code class="language-javascript">const pie = d3.pie()
    .value(d => d.value)
    .sort(null);
const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radius);</code></pre>
    <h3>四、填充颜色与绘制路径</h3>
    <p>定义颜色比例尺并绘制扇形：</p>
    <pre><code class="language-javascript">const color = d3.scaleOrdinal()
    .domain(dataset.map(d => d.label))
    .range(d3.schemeCategory20);
const arcs = svg.selectAll('path')
    .data(pie(dataset))
    .enter()
    .append('path')
    .attr('d', arc)
    .attr('fill', d => color(d.data.label))
    .attr('stroke', '#fff')
    .attr('stroke-width', 2);</code></pre>
    <h3>五、添加交互标签</h3>
    <p>实现动态标签提示：</p>
    <pre><code class="language-javascript">const labelArc = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);
svg.selectAll('text')
    .data(pie(dataset))
    .enter()
    .append('text')
    .text(d => `${d.data.label}: ${d.data.value}%`)
    .attr('transform', d => `translate(${labelArc.centroid(d)})`)
    .style('text-anchor', 'middle')
    .style('font-size', '12px');</code></pre>
    <h3>六、最佳实践与优化</h3>
    <ul>
        <li><strong>响应式设计</strong>: 使用<code>viewBox</code>替代固定宽高</li>
        <li><strong>动画过渡</strong>: 添加<code>.transition().duration(800)</code>实现渐变效果</li>
        <li><strong>可访问性</strong>: 为SVG添加<code>aria-label</code>描述</li>
        <li><strong>性能优化</strong>: 复杂数据集使用<code>path</code>简化算法</li>
    </ul>
    <div class="references">
        <p>参考资料：</p>
        <ul>
            <li>D3.js官方文档: <a href="https://github.com/d3/d3/blob/master/API.md" target="_blank">GitHub Repository</a></li>
            <li>SVG规范: <a href="https://www.w3.org/TR/SVG2/" target="_blank">W3C标准文档</a></li>
            <li>数据可视化最佳实践: <a href="https://www.data-to-viz.com/" target="_blank">Data to Viz</a></li>
        </ul>
    </div>
</div>
<style>
.article-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.8;
    color: #333;
}
pre {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 20px 0;
}
code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
h3 {
    color: #2c3e50;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 10px;
    margin-top: 30px;
}
.references {
    background: #f8f9fa;
    padding: 20px;
    border-left: 4px solid #3498db;
    margin-top: 40px;
}
.references a {
    color: #3498db;
    text-decoration: none;
}
.references a:hover {
    text-decoration: underline;
}
</style>