外部CSS文件必须通过标签引入，D3无法动态加载；需在HTML的中声明，路径相对HTML文件，且服务器须返回Content-Type: text/css；D3元素须显式添加class才能匹配CSS规则，SVG元素应使用fill/stroke而非color。
外部CSS文件必须通过
D3 本身不提供加载 CSS 文件的能力，d3.select 或 d3.style 都无法读取或注入外部 .css 文件。你必须在 HTML 的 中用标准方式引入：
- 路径必须相对于 HTML 文件（如
css/chart.css或./assets/styles.css） - 确保服务器能正确返回
Content-Type: text/css，否则浏览器会忽略该样式表 - 不要试图用
fetch()读取 CSS 内容再插入—— 这会绕过 CSS 作用域规则，且破坏 :root 变量、@media 查询等特性
.classed() 和 .attr("class") 都得配合 CSS 选择器才生效
即使 CSS 文件已加载，D3 元素也不会自动匹配样式——前提是元素没被赋予对应 class 名。
- 写法错误：
.attr("fill", "steelblue")虽然能上色，但脱离了 CSS 管控，后续主题切换或批量调整就失效 - 正确写法：先用
.attr("class", "bar")或.classed("bar", true)给 - CSS 文件里必须有对应规则，例如：
.bar { fill: var(--bar-color, #3498db); } - 注意：SVG 元素（
color，只认fill/stroke；文本元素（color
更新数据时，.classed() 必须放在 update selection 上，不能只写在 enter
常见视觉错乱：新条形有 hover 效果，旧条形点击后状态不变——根本原因是类名更新没覆盖到所有当前元素。
- 错误模式：
enter().append("rect").attr("class", "bar")，然后 update 段完全不碰 class - 正确做法：统一在绑定后的 selection（即 enter + update 合并态）上调用
.classed() - 示例：
bars.classed("selected", d => d.selected).classed("disabled", d => d.disabled) - 这样能保证过渡动画、伪类（:hover/:active）和 CSS 变量响应都持续有效
用 CSS 变量实现主题切换时，:root 更新要早于 D3 渲染帧
如果调用 document.documentElement.style.setProperty("--bar-color", "#e74c3c") 后图表颜色没变，大概率是浏览器还没重绘，或 D3 的 attr/fill 值固化了。
- 避免在 D3 链式调用中硬编码颜色：
.attr("fill", "#3498db")→ 改为依赖 CSS 变量：.attr("fill", "var(--bar-color)") - 修改变量后，无需重跑 D3 更新逻辑，只要确保元素 class 没丢、CSS 规则没被覆盖即可
- 特别注意：若使用
getComputedStyle(el).fill获取值，它返回的是计算后颜色（如 rgb(52, 152, 219)），不是变量名——调试时别被这个骗了
真正难的不是把 CSS 文件挂上去，而是让每个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
