选择器与数据绑定
一、核心概念：选择器与数据绑定
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过渡效果提升用户体验
- 使用事件监听器(