当前位置：首页 > article >正文

D3.js 入门指南

article 2025/1/16 2:31:07

D3.js（Data-Driven Documents）是一个强大的 JavaScript 库，用于基于数据来创建动态和交互式的数据可视化。它使得开发者可以通过数据驱动的方式将数据绑定到 DOM 元素，并使用 HTML、SVG 和 CSS 来渲染视觉效果。

环境准备

在开始之前，确保你的项目中引入了 D3.js。你可以通过 CDN 引入：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Demo</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个 HTML 文件，并引入了 D3.js 的最新版本。

创建简单的柱状图

接下来，我们将通过一段简单的代码，使用 D3.js 创建一个柱状图。首先，在 script.js 文件中添加以下内容：

// 数据
const data = [30, 86, 168, 234, 12, 60, 100];

// 设置宽度和高度
const width = 400;
const height = 200;

// 创建一个 SVG 容器
const svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);

// 创建比例尺
const xScale = d3.scaleBand()
.domain(data.map((d, i) => i)) // 使用数据索引作为 x 轴值
.range([0, width])
.padding(0.1); // 设置柱子间距

const yScale = d3.scaleLinear()
.domain([0, d3.max(data)]) // y 轴值范围
.range([height, 0]); // 垂直坐标反转

// 绘制柱状图
svg.selectAll("rect")
.data(data) // 绑定数据
.enter() // 为每个数据创建一个矩形
.append("rect")
.attr("x", (d, i) => xScale(i)) // x 坐标
.attr("y", d => yScale(d)) // y 坐标
.attr("width", xScale.bandwidth()) // 设置柱子宽度
.attr("height", d => height - yScale(d)) // 设置柱子高度
.attr("fill", "steelblue"); // 设置颜色

代码解析

数据定义：我们定义一个包含数值的数组 data，这些数值将用于绘制柱状图的高度。
SVG 容器：使用 d3.select() 来选择我们在 HTML 中定义的 div，然后创建一个宽度为 400，高度为 200 的 SVG 容器。
比例尺：
- xScale: 使用 scaleBand 创建横坐标比例尺，将数据的索引映射到 SVG 的宽度。
- yScale: 使用 scaleLinear 创建纵坐标比例尺，将数据的值映射到 SVG 的高度。
绘制柱状图：
- 通过 selectAll("rect") 选择所有矩形，并通过 data(data) 绑定数据。
- 使用 enter() 方法为每个数据项创建一个矩形元素。
- 设置矩形的 x, y, width, height 和 fill 属性，根据比例尺和数据计算出相应的值。