D3js圆环图图例

基础概念

D3.js（Data-Driven Documents）是一个JavaScript库，用于使用数据来操作文档。D3.js提供了丰富的可视化组件，包括圆环图（Donut Chart）。圆环图是一种环形图表，通常用于展示数据的占比关系。

类型

圆环图主要有以下几种类型：

静态圆环图：展示数据的静态占比关系。
动态圆环图：可以实时更新数据，展示数据的变化趋势。
交互式圆环图：支持用户交互，如点击、悬停等。

应用场景

圆环图适用于以下场景：

数据占比展示：如市场份额、用户比例等。
进度展示：如项目进度、任务完成情况等。
分类数据展示：如产品类别占比、地区分布等。

示例代码

以下是一个简单的D3.js圆环图示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js Donut Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .donut {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
        .donut-segment {
            fill: steelblue;
            stroke: #fff;
            stroke-width: 2px;
        }
    </style>
</head>
<body>
<svg width="500" height="500"></svg>
<script>
    const data = [10, 20, 30, 40];
    const width = 500;
    const height = 500;
    const radius = Math.min(width, height) / 2;
    const color = d3.scaleOrdinal(d3.schemeCategory10);

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

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

    const arc = d3.arc()
        .innerRadius(radius * 0.5)
        .outerRadius(radius);

    const arcs = svg.selectAll(".donut-segment")
        .data(pie(data))
        .enter()
        .append("g")
        .attr("class", "donut-segment");

    arcs.append("path")
        .attr("d", arc)
        .attr("fill", (d, i) => color(i));

    arcs.append("text")
        .attr("transform", d => `translate(${arc.centroid(d)})`)
        .attr("text-anchor", "middle")
        .text(d => d.data);
</script>
</body>
</html>