Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3 selectAll multiple classes AND or OR

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")
 .........;
like image 533
Shane G Avatar asked Aug 10 '17 14:08

Shane G


1 Answers

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>
like image 81
altocumulus Avatar answered Sep 16 '22 20:09

altocumulus