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, heightfill 属性,根据比例尺和数据计算出相应的值。

运行示例

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

总结

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

相关推荐
坐吃山猪2 小时前
SpringBoot01-配置文件
java·开发语言
晚风(●•σ )2 小时前
C++语言程序设计——06 字符串
开发语言·c++
我叫汪枫2 小时前
《Java餐厅的待客之道:BIO, NIO, AIO三种服务模式的进化》
java·开发语言·nio
Nicole-----2 小时前
Python - Union联合类型注解
开发语言·python
晚云与城2 小时前
今日分享:C++ -- list 容器
开发语言·c++
兰雪簪轩3 小时前
分布式通信平台测试报告
开发语言·网络·c++·网络协议·测试报告
FPGAI3 小时前
Qt编程之信号与槽
开发语言·qt
Swift社区4 小时前
从 JDK 1.8 切换到 JDK 21 时遇到 NoProviderFoundException 该如何解决?
java·开发语言
0wioiw04 小时前
Go基础(④指针)
开发语言·后端·golang
gnip4 小时前
Jst执行上下文栈和变量对象
前端·javascript