直接写 .bar { color: red; } 不生效，因为 color 对 svg 形状元素无效，需用 fill 或 stroke；且必须显式添加 class="bar"，selectall(".bar") 不会自动添加类。
为什么直接写 .bar { color: red; } 不生效
因为 color 是 CSS 文本属性，对 SVG 的 <rect></rect>、<circle></circle>、<line></line> 等形状元素完全无效。浏览器会忽略它，矩形仍按默认（通常是黑色或透明）渲染。真正起作用的是 fill（填充）和 stroke（描边）——这是 SVG 原生支持的属性，不是 CSS 继承来的。
另一个常见疏漏是：CSS 选择器如 .bar 只能匹配带有 class="bar" 的元素。如果你在 D3 中只写了 .append("rect")，但没加 .attr("class", "bar")，那这个 <rect></rect> 就根本不在选择器范围内，样式自然不会应用。
selectAll(".bar") 不等于自动添加 class
D3 的 selectAll(".bar") 是数据绑定时的“更新选择集”，它只负责找出已有 DOM 中已带 class="bar" 的元素，用于后续的 .data().enter() 更新逻辑。它不会、也不能替你给新创建的元素加上 class。
必须显式调用 .attr("class", "bar") 或 .classed("bar", true) 才行：
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar") // ✅ 必须这一步
.attr("x", d => x(d.value))
.attr("y", d => y(d.label))
.attr("width", d => x(d.value) - x(0))
.attr("height", y.bandwidth());
如果用 .classed("bar", true)，语义更清晰，且支持布尔切换（比如根据条件动态增删类），但效果等价。
如何让 CSS 变量和主题切换真正起效
单纯把 fill 写死在 CSS 里（如 fill: #3498db;）会失去灵活性。推荐用 CSS 自定义变量配合 fill: var(--bar-color);：
- 在根节点或容器上设置
data-theme="dark"，然后通过 CSS 层叠控制变量值 - D3 元素只需保持
class="bar"，无需任何内联样式或 JS 动态改色 - 确保变量定义早于使用它的规则，且优先级足够（避免被其他
fill声明覆盖）
例如：
:root {
--bar-color: #3498db;
}
[data-theme="dark"] {
--bar-color: #2ecc71;
}
.bar {
fill: var(--bar-color);
transition: fill 0.2s ease;
}
这样换主题只需改一个属性，所有 .bar 元素自动响应。
调试时最该先看什么
样式不生效，别急着改 JS 或重写 CSS。打开浏览器开发者工具，直接点开 Elements 面板，找到那个 <rect></rect> 元素，确认两点：
- 它是否真的有
class="bar"属性（而不是空着、拼错、或被其他代码覆盖） - 它的 computed 样式里，
fill值是否来自你写的.bar { fill: ... }规则（注意看来源路径和是否被 strike-through）
经常发现是 class 没加对，或者 CSS 文件加载失败，或者规则被更具体的 selector（比如带 !important 的内联 style）压过了——这些比逻辑错误更容易定位，也更快修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
