d3选择具有包含字符串的类名的元素

Question

以下是一系列路径。每条路径都以之前的或之后的_结尾。

<svg>
<g>
<path class= "my-class-before" ...></path>
</g>
<g>
<path class= "my-class-before" ...></path>
</g>
<g>
<path class= "my-class-after" ...></path>
</g>
<g>
<path class= "my-class-after" ...></path>
</g>
</svg>

如何选择以_before结尾的路径？

const beforeSelected = ""; ///How to select element with class that ends  with **_before**.
const bedoreAreas = d3
.selectAll(beforeSelected)
.transition()
.style('opacity', 1);

感谢您帮助

Answer 1

来自文档：

选择方法接受W3C选择器字符串

您可以在您的案例属性选择器中使用它，使用$指定属性应该以什么结尾，如下所示：

const befor = d3
.selectAll("[class$='-before']")
console.log(befor.size());
const after = d3
.selectAll("[class$='-after']")
console.log(after.size());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
<svg>
<g>
<path class= "my-class-before"></path>
</g>
<g>
<path class= "my-class-before"></path>
</g>
<g>
<path class= "my-class-after"></path>
</g>
<g>
<path class= "my-class-after"></path>
</g>
</svg>