如何使用d3.selectAll选择指定元素内的类元素？

嘿，我来帮你搞定这个问题！根据你描述的HTML结构（两个id为one和two的div，各自包含多个带test类的p元素），完全可以用纯D3的方式精准选中目标元素，不需要依赖jQuery或原生JS的额外方法，下面是两种实用的方案：

方法一：使用后代选择器直接定位 #

D3支持标准的CSS选择器语法，你可以直接通过父元素ID + 后代类选择器的组合来指定范围：

// 选中id为one的div内所有带test类的元素
const oneTests = d3.selectAll("#one .test");

// 选中id为two的div内所有带test类的元素
const twoTests = d3.selectAll("#two .test");

这里的#one .test表示“所有属于id为one的元素的后代，且带有test类的元素”，完全符合你的需求，而且是纯D3的选择方式，能直接配合后续的数据绑定操作。

方法二：链式调用先选父元素再选子元素 #

如果你需要先对父元素（比如#one或#two）做一些操作，或者想让代码逻辑更清晰，可以先选中父元素，再链式调用selectAll来筛选子元素：

// 先定位到#one，再选它内部的.test元素
const oneTests = d3.select("#one").selectAll(".test");

// 同理处理#two
const twoTests = d3.select("#two").selectAll(".test");

这种方式的好处是，如果你后续要给父元素添加样式、绑定数据，或者基于父元素做其他DOM操作，不需要重复选择父元素，代码更简洁。

小示例：验证选择效果 #

你可以给选中的元素添加样式来验证是否选对了，比如：

// 把#one内的.test元素改成红色
oneTests.style("color", "red");

// 把#two内的.test元素改成蓝色
twoTests.style("color", "blue");

这样就能直观看到两个div内的.test元素被分别选中并修改了样式，完全符合你的要求，而且全程用D3的API实现，能无缝衔接数据绑定的需求。

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