CODEWITHSUNDEEP
javascriptd3.jssvg
Richard77
Richard77

Reputation: 21621

d3 select element with class name that contains a string

Here are a series of paths. each path has that ends either with _before or _after.

<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>

How do I select paths that ends with _before?

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

Thanks for helping

Upvotes: 2

Views: 1362

Answers (1)

ROOT
ROOT

Reputation: 11622

From the documentation:

Selection methods accept W3C selector strings

Which you can use in your case attribute selector, use $ to specify what the attribute should end with, like this:

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>

Upvotes: 3

Related Questions