d3.js中selectAll方法未选中所有符合条件元素的问题求助

问题成因分析 #

1. 核心原因不是D3选择器逻辑出错，而是HTML解析规则导致实际DOM结构和你编写的代码不一致
   HTML规范中，<p>是段落标签，仅能容纳行内元素（比如<b>、<span>、<a>等），不允许嵌套块级元素（<h4>就属于块级元素）。当浏览器解析到<p>内部出现<h4>标签时，会自动隐式闭合前面的<p>标签，你写的代码最终被浏览器解析后的实际DOM结构如下：

<p>
    <b>selected</b>
    <b>selected</b>
</p>
<h4>some word</h4>
<b>not selected</b>
<p></p>

你原本写在<h4>后面的<b>标签，实际上已经不在任何<p>标签的内部了，最后多余的</p>会被浏览器解析为一个空的<p>元素。
2. D3选择器的执行逻辑是符合预期的：你写的d3.selectAll("p").selectAll("b")作用是选中所有<p>标签的后代<b>元素，最后那个<b>不在<p>内部，自然不会被选中，你可以打开浏览器开发者工具的元素面板，直接查看实际DOM结构验证这个结论。

可选解决方案 #

• 如果不需要保留结构语义：把<h4>替换为行内元素（比如<span>），再通过CSS调整样式达到和<h4>一样的视觉效果
• 如果不需要限定从<p>下选择<b>：直接使用d3.selectAll("b")即可选中所有<b>元素
• 调整HTML结构：不要把块级元素放到<p>内部，符合HTML规范的结构自然不会出现选择异常

内容的提问来源于stack exchange，提问作者Dave Mak