使用 D3 创建动态、响应式环形图，实现文字居中和自适应尺寸

引言

可视化对于理解和传达复杂数据集至关重要。环形图作为一种流行的图表类型，特别适合展示部分与整体之间的关系。D3.js 是一个强大的 JavaScript 库，可帮助我们轻松创建交互式、可缩放的图表。

本文将指导您使用 D3 创建一个动态、响应式的环形图，其中文字自动居中并在不同屏幕尺寸下自适应。

创建基本环形图

首先，让我们创建一个基本环形图。使用 D3 选择器选择 SVG 画布并设置其尺寸：

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

然后，使用 d3.pie() 函数计算每个部分的角度：

const data = [
  { name: "A", value: 10 },
  { name: "B", value: 20 },
  { name: "C", value: 30 },
];

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

接下来，使用 d3.arc() 函数创建环形路径：

const arc = d3
  .arc()
  .innerRadius(100)
  .outerRadius(200);

最后，使用 d3.select() 和 enter() 选择器绘制路径：

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

添加文字标签

要添加文字标签，我们需要使用 text 元素：

const labels = svg
  .selectAll("text")
  .data(pie)
  .enter()
  .append("text")
  .attr("transform", (d) => `translate(${arc.centroid(d)})`)
  .text((d) => d.data.name);

实现文字居中

现在，让我们让文字居中。为此，我们需要计算标签宽度的偏移量：

const labels = svg
  .selectAll("text")
  .data(pie)
  .enter()
  .append("text")
  .attr("transform", (d) => `translate(${arc.centroid(d)})`)
  .text((d) => d.data.name)
  .attr("dx", (d) => -arc.centroid(d)[0] / 2);

实现大小自适应

为了使环形图适应不同的屏幕尺寸，我们需要设置响应式尺寸。使用 d3.scaleLinear() 来缩放画布尺寸：

const scale = d3.scaleLinear().domain([0, 1]).range([0, 500]);
const newWidth = scale(window.innerWidth);
const newHeight = scale(window.innerHeight);

svg.attr("width", newWidth).attr("height", newHeight);

然后，使用 attr() 更新路径和标签的大小：

arcs.attr("d", arc);
labels.attr("transform", (d) => `translate(${arc.centroid(d)})`).attr("dx", (d) => -arc.centroid(d)[0] / 2);

结论

恭喜！您已成功使用 D3 创建了一个动态、响应式的环形图，其中文字自动居中并在不同屏幕尺寸下自适应。本指南已演示了如何使用 D3 的强大功能来创建交互式、信息丰富的可视化效果。继续探索 D3，释放您的数据可视化潜力。