返回

初识 D3.js，零基础绘制柱形图，轻松玩转数据可视化

前端

踏入数字时代的我们，身边充斥着海量的数据，这些数据蕴含着丰富的知识和洞见，等待着我们去挖掘和呈现。数据可视化应运而生，它将复杂的数据转化为直观易懂的图表，帮助人们快速理解信息，做出明智决策。

D3.js（Data-Driven Documents）作为一款强大的 JavaScript 数据可视化库，正受到越来越多开发者的青睐。D3.js 提供了一系列强大的函数，可以帮助你轻松创建各种各样的交互式数据可视化图表。

在这个入门系列教程中，我们将从绘制一个简单的柱形图开始，一步步带你领略 D3.js 的强大功能。本教程适合所有想要学习 D3.js 的新手，无需任何编程基础。

首先，让我们先来了解一下 D3.js 的基本概念。

  • 数据驱动（Data-Driven）： D3.js 以数据为核心，通过数据来驱动图表的外观和行为。
  • 文档对象模型（Document Object Model，DOM）： D3.js 使用 DOM 来创建和操作可视化元素。
  • 可缩放矢量图形（Scalable Vector Graphics，SVG）： D3.js 使用 SVG 来绘制可视化元素。SVG 是一种基于 XML 的矢量图形格式，具有良好的可扩展性和交互性。

掌握了这些基本概念后，我们就可以开始绘制我们的第一个柱形图了。

  1. 导入 D3.js 库

在 HTML 文件中导入 D3.js 库：

<script src="https://d3js.org/d3.v7.min.js"></script>
  1. 加载数据

我们将使用一个包含国家及其人口数据的 JSON 文件作为数据源。

const data = [
  {
    country: '中国',
    population: 1444000000
  },
  {
    country: '印度',
    population: 1393000000
  },
  {
    country: '美国',
    population: 332400000
  },
  {
    country: '印度尼西亚',
    population: 273500000
  },
  {
    country: '巴基斯坦',
    population: 220800000
  }
];
  1. 创建 SVG 元素

在 HTML 文件中创建一个 SVG 元素：

<svg id="chart"></svg>
  1. 设置 SVG 元素的宽高

使用 D3.js 的 select() 方法选择 SVG 元素，并设置其宽高：

const svg = d3.select('svg');

svg.attr('width', 500)
  .attr('height', 500);
  1. 设置比例尺

比例尺用于将数据值映射到 SVG 元素的坐标。这里我们使用线性比例尺将人口数据映射到柱形图的柱高：

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.population)])
  .range([0, 400]);
  1. 创建柱形图

使用 D3.js 的 selectAll() 方法选择所有数据，并使用 enter() 方法创建柱形图：

const bars = svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect');
  1. 设置柱形图的属性

使用 attr() 方法设置柱形图的属性，包括位置、大小和颜色：

bars.attr('x', (d, i) => i * 100)
  .attr('y', d => 400 - yScale(d.population))
  .attr('width', 80)
  .attr('height', d => yScale(d.population))
  .attr('fill', 'steelblue');
  1. 添加轴线和标签

为了让图表更加易于理解，我们可以添加轴线和标签：

// X 轴
svg.append('g')
  .attr('transform', 'translate(0, 400)')
  .call(d3.axisBottom(d3.scaleBand().domain(data.map(d => d.country)).range([0, 400])))
  .selectAll('text')
  .attr('transform', 'translate(-10, 0) rotate(-45)')
  .style('text-anchor', 'end');

// Y 轴
svg.append('g')
  .call(d3.axisLeft(yScale));

至此，我们就完成了一个简单的柱形图。通过这个教程，你已经初步了解了 D3.js 的基本用法。后续，我们将继续学习其他更复杂的图表类型，并探索 D3.js 的更多功能。