D3.js 入门指南

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"); // 设置颜色

代码解析

1. 数据定义 ：我们定义一个包含数值的数组 data，这些数值将用于绘制柱状图的高度。

2. SVG 容器 ：使用 d3.select() 来选择我们在 HTML 中定义的 div，然后创建一个宽度为 400，高度为 200 的 SVG 容器。

3. 比例尺：

   • xScale: 使用 scaleBand 创建横坐标比例尺，将数据的索引映射到 SVG 的宽度。
   • yScale: 使用 scaleLinear 创建纵坐标比例尺，将数据的值映射到 SVG 的高度。

4. 绘制柱状图：

   • 通过 selectAll("rect") 选择所有矩形，并通过 data(data) 绑定数据。
   • 使用 enter() 方法为每个数据项创建一个矩形元素。
   • 设置矩形的 x, y, width, height 和 fill 属性，根据比例尺和数据计算出相应的值。

运行示例

只需打开你的 HTML 文件，你将会看到一个简单的柱状图，如下所示：还是自己去跑吧

总结

通过这篇文章，你已经了解了 D3.js 的基本用法，并成功创建了一个简单的柱状图。D3.js 是一个功能极其强大的库，可以实现各种复杂的可视化效果，关于数据可视化的更多功能，可以参考 D3.js 的官方文档。