D3 柱状图：一分钟带你掌握柱状图绘制

前端

2024-01-07 18:47:11

D3.js：绘制柱状图的终极指南

简介

D3.js，一个强大的 JavaScript 库，因其创建交互式且引人入胜的图表和图形的能力而闻名。通过本文，我们将深入了解 D3.js 的基本概念，并逐步指导你绘制一个柱状图，这是数据可视化的基本要素。

SVG：可扩展矢量图形

SVG（可缩放矢量图形）是一种用于创建清晰锐利图像的矢量图形格式。D3.js 利用 SVG 的强大功能，让你能够构建高度可定制的图形，这些图形可以轻松地缩放而不失真。

比例尺：连接数据与图形

比例尺在数据可视化中扮演着至关重要的角色，它建立了数据值和图形元素之间的大小或位置的映射关系。例如，在柱状图中，比例尺通常用于确定柱状图的高度。

柱状图绘制步骤

准备好必要的概念后，让我们一步一步地绘制一个柱状图：

创建 SVG 元素： 在 HTML 文档中创建一个 SVG 元素，作为柱状图的容器。
定义比例尺： 使用 D3.js 的 scaleLinear() 函数创建一个线性比例尺，将数据值映射到图形元素的尺寸或位置。
创建数据数组： 定义一个包含要绘制的数据值的数组。
选择 SVG 元素： 使用 D3.js 的 selectAll() 方法选择 SVG 元素。
绑定数据： 使用 D3.js 的 data() 方法将数据数组绑定到选定的 SVG 元素。
创建新元素： 使用 D3.js 的 enter() 方法创建与数据数组中每个值相对应的 SVG 矩形。
添加元素： 使用 D3.js 的 append() 方法将创建的矩形添加到 SVG 元素中。
设置属性： 使用 D3.js 的 attr() 方法设置矩形的高度、宽度、颜色等属性。
删除不需要的元素： 使用 D3.js 的 exit() 方法删除与数据数组中不再存在的数据值对应的 SVG 元素。

示例代码

以下 JavaScript 代码片段演示了如何使用 D3.js 绘制柱状图：

// 数据数组
const data = [20, 30, 40, 50, 60];

// 比例尺
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, 400]);

// 创建 SVG 元素
const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 250);

// 绑定数据
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 50)
  .attr("y", d => 250 - xScale(d))
  .attr("width", 40)
  .attr("height", d => xScale(d))
  .attr("fill", "steelblue");