D3.js新手入门指南：用柱状图揭开数据之美

2023-10-28 08:15:21

D3.js全称Data-Driven Documents，顾名思义，它是一个由数据驱动的JavaScript库，专门用于将数据可视化。通过D3.js，我们可以轻松创建交互式且引人入胜的数据可视化作品，帮助我们更好地理解和展示数据。

在本文中，我们将重点介绍D3.js新手入门，并通过一个简单的柱状图示例，逐步演示如何使用D3.js创建数据可视化。

柱状图示例

柱状图是数据可视化中的一种常见图表类型，用于比较不同类别或组别的值。它由一系列垂直条形组成，每个条形的高度表示其对应的值。

数据准备

要创建柱状图，我们需要准备数据。以下是一个示例数据集，其中包含三个类别（A、B、C）和它们的相应值：

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

创建SVG元素

SVG（可缩放矢量图形）是D3.js创建可视化元素的常用格式。首先，我们需要创建一个SVG元素作为图表的基础：

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

定义比例尺

比例尺的作用是将数据值映射到视觉表示上。在本例中，我们将使用线性比例尺来将数据值映射到柱状图的高度：

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, (d) => d.value)])
  .range([0, 250]);

创建柱状图

现在，我们可以使用D3.js中的矩形元素创建柱状图：

const bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 100)
  .attr("y", (d) => 300 - yScale(d.value))
  .attr("width", 50)
  .attr("height", (d) => yScale(d.value))
  .attr("fill", "steelblue");

添加轴和标签

为了让柱状图更加清晰易读，我们可以添加轴和标签：

// 添加x轴
const xAxis = d3.axisBottom()
  .scale(d3.scaleBand()
    .domain(data.map((d) => d.category))
    .range([0, 500])
    .padding(0.1))
svg.append("g")
  .attr("transform", "translate(0,250)")
  .call(xAxis);

// 添加y轴
const yAxis = d3.axisLeft()
  .scale(yScale);
svg.append("g")
  .call(yAxis);