7

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="class a, class b, class c">
<g class="class q, class r, class z">
<g class="class d, class b, class e">

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

2 Answers 2

12

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

1
  • ah sorry, i chose those class names for example purposes. none of my classes actually have spaces... oh but those commas might be an issue... Nov 25, 2014 at 21:17
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.