使用D3.js绘制堆叠柱状图，揭示数据中的层级关系

2024-01-14 15:29:21

在当今信息泛洪的世界中，数据的可视化至关重要，它使我们能够以有意义且引人入胜的方式理解和传达复杂信息。堆叠柱状图就是这样一种强大的可视化工具，它可以揭示数据集中的层级关系。本文将指导你使用流行的JavaScript库D3.js绘制交互式堆叠柱状图，让你对数据有更深入的见解。

绘制堆叠柱状图

1. 导入D3模块

import * as d3 from "d3";

2. 准备数据

堆叠柱状图的数据通常以对象数组的形式出现，其中每个对象代表一个层次，包含一个名称和一个值。例如：

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

3. 定义尺寸和比例

const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 400 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const xScale = d3.scaleBand().range([0, width]).padding(0.2);
const yScale = d3.scaleLinear().range([height, 0]);

4. 创建画布

const canvas = d3
  .select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

5. 定义颜色尺度

const colorScale = d3
  .scaleOrdinal()
  .range(["#e41a1c", "#377eb8", "#4daf4a"]);

6. 绑定数据并绘制柱状图

const groups = canvas.selectAll("g").data(data);

groups
  .enter()
  .append("g")
  .attr("transform", (d) => `translate(${xScale(d.name)}, 0)`)
  .selectAll("rect")
  .data((d) => d)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale.bandwidth() / 2)
  .attr("y", (d) => yScale(d.value))
  .attr("width", xScale.bandwidth() / 2)
  .attr("height", (d) => height - yScale(d.value))
  .style("fill", (d) => colorScale(d.name));

7. 添加交互性（可选）

可以通过添加鼠标悬停和点击事件来增强堆叠柱状图的交互性。

const tooltip = d3
  .select("body")
  .append("div")
  .style("position", "absolute")
  .style("visibility", "hidden");

canvas
  .selectAll("rect")
  .on("mouseover", (event, d) => {
    tooltip
      .style("visibility", "visible")
      .text(`${d.name}: ${d.value}`)
      .style("left", event.clientX + 10 + "px")
      .style("top", event.clientY + 10 + "px");
  })
  .on("mouseout", () => tooltip.style("visibility", "hidden"));