D3 selectAll multiple classes AND or OR

Question

I am trying to select two classes like this,

d3.selectAll(".class1.class2")

but this appears to select an element with both class1 AND class2. How do I select an element by class with class1 OR class2 but the classes need not be mutually exclusive, so an element with both classes should also get selected.

Perhaps the solution is just,

 d3.selectAll(".class1")
 .........;
 d3.selectAll(".class2")
 .........;

score 21 · Accepted Answer · answered Aug 10 '17 at 15:21

As per D3's documentation the selection methods accept W3C selector strings. If you follow this link and dig into this API you end up at section 4.1 Selector Lists of the Selectors Level 4 Draft which specifies:

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the selector list.

For your example this means the correct selector string would be ".class1,.class2". Have a look at the following snippet which uses this selector string to color all paragraphs having either one or both of the classes class1 or class2.

d3.selectAll(".class1,.class2")
  .style("color", "red");

<script src="https://d3js.org/d3.v4.js"></script>

<p class="class1">class1</p>
<p class="class2">class2</p>
<p class="class3">class3</p>
<p class="class1 class2">class1 class2</p>

score 1 · Answer 2 · answered Aug 10 '17 at 14:35

1

This seems to work,

d3.selectAll(".bar||.xAxisText")

answered Aug 10 '17 at 14:35

Shane G

3,129
10
43
85

1

It works, but it throws a warning `DOMException: Failed to execute 'querySelectorAll' on 'Element': '.class1||.class2||.class3' is not a valid selector.` – Saeid Feb 05 '19 at 09:56

D3 selectAll multiple classes AND or OR

2 Answers2