CODEWITHSUNDEEP
javascriptd3.js
Zoybe
Zoybe

Reputation: 25

Only select subset in d3

Is it possible to only select a subset / subgroup in d3?

right now I have

d3.selectAll(".row")

now below the rows I have cells and I want to select all cells from row 3 as shown in this image subset example. There is no get(3) or [3] option.

Thank you for your help.

d3.selectAll(".row").selectAll(".cell")

gives me all cells

Upvotes: 1

Views: 210

Answers (1)

Mark
Mark

Reputation: 108522

Lots of ways to do this. My favorite would be using a css :nth-child selector:

d3.select(".row:nth-child(3n)").selectAll(".cell");

Here's some others:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <div class="row">
      <div class="cell">a</div>
      <div class="cell">b</div>
      <div class="cell">c</div>
    </div>
    <div class="row">
      <div class="cell">d</div>
      <div class="cell">e</div>
      <div class="cell">f</div>
    </div>
    <div class="row">
      <div class="cell">g</div>
      <div class="cell">h</div>
      <div class="cell">i</div>
    </div>
    <div class="row">
      <div class="cell">j</div>
      <div class="cell">k</div>
      <div class="cell">l</div>
    </div>
  </body>
  
  <script>
    
    var w1 = d3.select(document.querySelectorAll(".row")[2]).selectAll(".cell"),
        w2 = d3.selectAll(".row").filter((d,i) => i === 2).selectAll(".cell"),
        w3 = d3.select(d3.selectAll(".row").nodes()[2]).selectAll(".cell"),
        w4 = d3.select(".row:nth-child(3n)").selectAll(".cell");      
  
  </script>

</html>

Upvotes: 2

Related Questions