「数据可视化 D3系列」入门第一章：Hello D3.js
Hello D3.js
- 一、初识D3.js：用JavaScript操控DOM
- 二、用D3操作DOM
- 代码解析
- 三、D3.js与jQuery的异同
- 四、下一步学习
一、初识D3.js：用JavaScript操控DOM
D3.js（Data-Driven Documents）是一个强大的JavaScript库，它让我们能够用数据驱动文档的变换。让我们从一个简单的"Hello World"示例开始，逐步探索D3的核心概念。
二、用D3操作DOM
👇 代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>D3.js入门 - Hello World</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
h3 {
color: #2c3e50;
margin: 10px 0;
padding: 8px;
background-color: #ecf0f1;
border-left: 4px solid #3498db;
}
</style>
</head>
<body>
<h1>D3.js入门示例</h1>
<div id="poem-container">
<h3></h3>
<h3></h3>
<h3></h3>
<h3></h3>
</div>
</body>
<script>
// 使用D3选择所有h3元素并设置文本内容
const poemLines = [
"日照香炉生紫烟",
"遥看瀑布挂前川",
"飞流直下三千尺",
"疑是银河落九天"
];
// 方法1：直接选择并设置文本
d3.selectAll("h3")
.text((d, i) => poemLines[i]);
// 方法2：使用数据绑定（更D3的方式）
d3.selectAll("h3")
.data(poemLines)
.text(d => d);
// 添加一些交互效果
d3.selectAll("h3")
.on("mouseover", function() {
d3.select(this)
.style("background-color", "#bdc3c7")
.style("color", "white");
})
.on("mouseout", function() {
d3.select(this)
.style("background-color", "#ecf0f1")
.style("color", "#2c3e50");
});
</script>
</html>
👇 运行效果：
代码解析
- D3的选择器
-
d3.select("selector")- 选择第一个匹配元素 -
d3.selectAll("selector")- 选择所有匹配元素
- 数据绑定
D3的核心思想是数据驱动：
d3.selectAll("h3")
.data(poemLines) // 绑定数据
.text(d => d); // 使用数据
- 链式调用
D3采用了流畅接口设计，允许方法链式调用：
d3.selectAll("h3")
.data(data)
.text(d => d)
.style("color", "red");
三、D3.js与jQuery的异同
看着上述写法是不是与jQuery比较像呢？下面看看他们之间的区别吧
| 特性 | D3.js | jQuery |
|---|---|---|
| 目的 | 数据可视化 | DOM操作/AJAX |
| 数据绑定 | 核心功能 | 无专门机制 |
| 动画 | 基于数据的过渡 | 基础动画效果 |
| SVG支持 | 强大 | 有限 |
四、下一步学习
在下一章中，我们将深入探讨：
- 选择元素
- 绑定数据
“D3不是图表库，而是数据与DOM绑定的强大工具。” - Mike Bostock(D3.js创始人)