最常见原因是CSS优先级被覆盖或类名错误；classed是布尔控制而非追加，支持单类/动态/批量操作，区别于attr会覆盖整个class属性，需注意enter/update一致性及SVG样式限制。
为什么 selection.classed 加了类但样式没生效？
最常见原因是 CSS 优先级被内联样式或更具体的规则覆盖，或者类名拼写/作用域出错。D3 本身不处理样式优先级，它只是把 class 属性写进 DOM——后续全靠 CSS 引擎解析。检查浏览器开发者工具的元素面板，确认目标元素上确实出现了你传入的类名（比如 node），再看该类对应的样式是否被 strikethrough（划掉）。
selection.classed 的三种调用方式和适用场景
这个方法不是“只加类”，它本质是布尔控制：类存在与否完全由第二个参数决定。容易误以为它是“追加类”的工具，其实不是。
-
selection.classed("active", true)：强制添加active类（若已存在则不变） -
selection.classed("active", false)：强制移除active类（若不存在则无事发生） -
selection.classed("active", d => d.isSelected)：对每个数据绑定元素动态计算布尔值，适合响应式状态更新
与 selection.attr("class", ...) 的关键区别
直接操作 class 属性会覆盖整个属性值，而 classed 是增量控制，安全得多。例如：
// ❌ 危险：覆盖已有所有类，可能干掉 d3 自动加的类（如 "enter"、"exit"）
selection.attr("class", "my-node");
// ✅ 安全：只管 "my-node"，其他类（如 "highlight"）不受影响
selection.classed("my-node", true);
另外，classed 支持一次传入对象批量控制多个类：
selection.classed({
"selected": d => d.active,
"disabled": d => !d.enabled,
"large": d => d.size > 10
});
CSS 类作用域和 D3 生命周期的隐性冲突
D3 更新时常用 enter()/update()/exit() 分段处理，但 classed 只作用于当前 selection。如果在 enter() 中加了类，却忘了在 update() 中同步更新状态，就会出现“新元素有类、旧元素没更新”的视觉不一致。
- 推荐统一在
updateselection 上调用classed，哪怕只是设为常量true - 避免在
enter()里加类后，在update()里完全不碰类名——这会让过渡或重绘失效 - 注意 SVG 元素（如
font-size对文本有效，但对
真正难的不是加类，而是让类的状态始终与数据、生命周期、CSS 规则三者对齐。漏掉任意一环，样式就“看起来没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
