D3.js使用无序列表旋转饼图

基础概念

D3.js（Data-Driven Documents）是一个JavaScript库，用于创建数据驱动的文档。它允许开发者使用数据来操作DOM（Document Object Model），从而生成复杂的可视化效果。D3.js提供了丰富的API来处理数据、创建图形和动画。

类型

D3.js可以用来创建各种类型的图表，包括：

折线图
柱状图
饼图
地图
树状图
网络图

应用场景

D3.js广泛应用于数据分析和数据可视化领域，常见应用场景包括：

数据报告
仪表盘
数据分析工具
科研数据可视化

使用无序列表旋转饼图的示例

以下是一个使用D3.js创建旋转饼图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js Pie Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .arc text {
            font-size: 12px;
            text-anchor: middle;
        }
        .arc path {
            stroke: #fff;
        }
    </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 svg = d3.select("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", `translate(${width / 2},${height / 2})`);

        const color = d3.scaleOrdinal()
            .domain(data.map((d, i) => i))
            .range(["#007bff", "#28a745", "#dc3545", "#ffc107"]);

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

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

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

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

        arcs.append("text")
            .attr("transform", d => `translate(${arc.centroid(d)})`)
            .attr("dy", ".35em")
            .text(d => d.data);

        // 旋转饼图
        svg.attr("transform", `rotate(-90)`);
    </script>
</body>
</html>

参考链接

常见问题及解决方法

问题：饼图旋转后文本标签位置不正确

原因：旋转饼图后，文本标签的位置需要重新计算。

解决方法：在旋转饼图后，调整文本标签的transform属性，使其正确显示。

arcs.append("text")
    .attr("transform", d => `translate(${arc.centroid(d)}) rotate(${d.startAngle * (180 / Math.PI) - 90})`)
    .attr("dy", ".35em")
    .text(d => d.data);

通过以上方法，可以解决饼图旋转后文本标签位置不正确的问题。