I am trying to select all elements with a certain class. They might have different classes before, or after this class, but as long as they have this class they should be selected

ex:

<g class="classa classb classc">
<g class="classq classr classz">
<g class="classd classb classe">

I wish to select the 1st and 3rd elements, because they have are both under classb. Any suggestions? I thought d3.selectAll(".classb") would work, but it doesn’t.

I am trying to select all elements with a certain class. They might have different classes before, or after this class, but as long as they have this class they should be selected

ex:

<g class="classa classb classc">
<g class="classq classr classz">
<g class="classd classb classe">

I wish to select the 1st and 3rd elements, because they have are both under classb. Any suggestions? I thought d3.selectAll(".classb") would work, but it doesn’t.

• javascript
• css
• d3.js
• select

2 Answers 2

When you're working with multiple classes in web development, remember that they are separated by a space in the class attribute.

So something like this

<g class="class_a class_b class_c">
<g class="class_z class_r class_z">
<g class="class_d class_b class_e">

Would be how you would get proper access to these elements.

Once you start naming these properly, you should be able to select them via CSS. So, classes are going to be a single word, and are separated by spaces (not commas).

Then try: d3.selectAll('.class_b')

Classes are separated by spaces, not commas!

<g class="classa classb classc">
<g class="classq classr classz">
<g class="classd classb classe">

or better yet,

<g class="class-a class-b class-c">
<g class="class-q class-r class-z">
<g class="class-d class-b class-e">

with the selector being d3.selectAll(".class-b").

Classes and selections for svg elements are the same as for html elements. Your selection of d3.selectAll(".class b") would be selecting all <b> elements who are children of elements with the class class.