Search code examples
javascriptcssd3.jsselect

d3 select everything with specific CSS class


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.


Solution

  • 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')