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创始人)