「数据可视化 D3系列」入门第二章：选择器与数据绑定
选择器与数据绑定
- 一、核心概念：选择器与数据绑定
- 二、选择器：精准定位DOM元素
- 基础选择方法
- 链式选择与层级关系
- 属性选择器
- 三、数据绑定：连接数据与DOM
- datum() 示例
- data() 示例
- 数据绑定的高级用法
- 四、常见陷阱与解决方案
- 问题1：data()处理字符串的特殊情况
- 问题2：数据与元素数量不匹配
- 五、实战代码
- 小结
- 下章预告：理解 Update Enter Exit
一、核心概念：选择器与数据绑定
D3.js的核心在于选择元素和绑定数据，这是所有可视化操作的基础。本章将深入探讨这两个关键概念。
二、选择器：精准定位DOM元素
基础选择方法
// 选择单个元素
d3.select("body"); // 选择第一个body元素
d3.select("#chart"); // 选择id为chart的元素
d3.select(".item"); // 选择第一个class为item的元素// 选择多个元素
d3.selectAll("p"); // 选择所有p元素
d3.selectAll(".item"); // 选择所有class为item的元素
链式选择与层级关系
// 从body开始，逐步缩小选择范围
d3.select("body").select("#container") // 选择body内的#container.selectAll(".bar"); // 选择#container内所有.bar元素
属性选择器
// 选择特定属性的元素
d3.select("[title='author']"); // 选择title属性为author的元素
d3.selectAll("[data-value]"); // 选择所有有data-value属性的元素
三、数据绑定：连接数据与DOM
两种绑定方式对比
| 方法 | 描述 | 适用场景 |
|---|---|---|
datum() | 将相同数据绑定到所有选中元素 | 需要所有元素显示相同数据时 |
data() | 将数组元素分别绑定到对应的DOM元素 | 常见的一对一数据绑定场景 |
datum() 示例
const message = "共享数据内容";
d3.selectAll("p").datum(message).text((d, i) => `段落${i+1}: ${d}`);
效果： 所有p元素显示相同内容，但带有不同的索引
data() 示例
const fruits = ["苹果", "香蕉", "橙子"];
d3.selectAll("li").data(fruits).text(d => d);
效果： 每个li元素分别显示不同的水果名称
数据绑定的高级用法
// 使用函数生成数据
d3.selectAll("circle").data(() => {const data = [];for (let i = 0; i < 10; i++) {data.push(Math.random() * 100);}return data;}).attr("r", d => d);
四、常见陷阱与解决方案
问题1：data()处理字符串的特殊情况
// 错误示范
d3.selectAll("span").data("Hello") // 字符串会被拆分为字符数组.text(d => d); // 每个span显示一个字母// 正确做法
d3.selectAll("span").data(["Hello"]) // 将字符串包装在数组中.text(d => d);
问题2：数据与元素数量不匹配
const data = [1, 2, 3];
const bars = d3.selectAll(".bar");// 处理不足的元素
bars.data(data).enter() // 进入"缺失元素"选区.append("div").attr("class", "bar");// 处理多余的元素
bars.data(data).exit() // 进入"多余元素"选区.remove();
五、实战代码
👇 代码示例：诗歌展示增强版
<!DOCTYPE html>
<html>
<head><script src="https://d3js.org/d3.v7.min.js"></script><style>.poem-line { padding: 8px;margin: 4px;transition: all 0.3s;}.highlight {background-color: #ffe0b2;transform: translateX(10px);}</style>
</head>
<body><div id="poem-container"></div><script>const poem = [{ text: "日照香炉生紫烟", author: "李白" },{ text: "遥看瀑布挂前川", year: "725年" },{ text: "飞流直下三千尺", comment: "夸张手法" },{ text: "疑是银河落九天", rating: 5 }];// 数据绑定与动态创建d3.select("#poem-container").selectAll(".poem-line").data(poem).enter().append("div").attr("class", "poem-line").html(d => `<strong>${d.text}</strong>${d.author ? `- ${d.author}` : ''}${d.year ? `(${d.year})` : ''}${d.comment ? `<small>${d.comment}</small>` : ''}`).on("mouseover", function() {d3.select(this).classed("highlight", true);}).on("mouseout", function() {d3.select(this).classed("highlight", false);});</script>
</body>
</html>
👇 运行效果：
小结
- 选择器是D3操作DOM的起点
select()选择单个元素selectAll()选择多个元素- 支持链式调用和复杂选择
- 数据绑定是D3的核心
datum()绑定相同数据到所有元素data()实现数据与元素的一一对应- 注意处理数据与元素数量不匹配的情况
- 交互增强让可视化更生动
- 使用事件监听器(
on())添加交互 - 结合CSS过渡效果提升用户体验
- 使用事件监听器(