I've the a node like:

<div>
  <svg ...>
    <g class="graph">
      <path class="myarea" d="...AAA..." pos="p1">  </path>
    </g>
    <g class="graph">
      <path class="myarea" d="...BBB..." pos="p2">  </path>
    </g>
    <g class="graph">
      <path class="myarea" d="...CCC..." pos="p3">  </path>
    </g>
  /svg>
</div>

I am trying to select a specific node (e.g where d="...BBB...") which has the attribute pos='p2'

d3.selectAll(".myarea").each(function(d,i) {
   console.log("-> ",  d3.select(this).attr("pos"), d3.select(this).attr("pos") == 'p2' );
  
});

This produces/returns an arrays with all 3 entries:

-> p0 false

-> p1 true

-> p2 false

-> [Array(3)]

I am interested in selecting just one, in this case the one with .attr("pos") == 'p2' so I'd like to return just one element.

I've tried with map() and filter() but without success.

What is the correct way to select a specific element based on an attribute value?

I've the a node like:

<div>
  <svg ...>
    <g class="graph">
      <path class="myarea" d="...AAA..." pos="p1">  </path>
    </g>
    <g class="graph">
      <path class="myarea" d="...BBB..." pos="p2">  </path>
    </g>
    <g class="graph">
      <path class="myarea" d="...CCC..." pos="p3">  </path>
    </g>
  /svg>
</div>

I am trying to select a specific node (e.g where d="...BBB...") which has the attribute pos='p2'

d3.selectAll(".myarea").each(function(d,i) {
   console.log("-> ",  d3.select(this).attr("pos"), d3.select(this).attr("pos") == 'p2' );
  
});

This produces/returns an arrays with all 3 entries:

-> p0 false

-> p1 true

-> p2 false

-> [Array(3)]

I am interested in selecting just one, in this case the one with .attr("pos") == 'p2' so I'd like to return just one element.

I've tried with map() and filter() but without success.

What is the correct way to select a specific element based on an attribute value?

• javascript
• node.js
• d3.js
• filter

• 2 Can you not use something like d3.selectAll(".myarea[d='BBB'][pos='p2']"), D3 supports any valid css selector, such as this (matching single attributes) and this (matching multiple attributes) – Andrew Reid Commented Nov 4, 2019 at 21:55
• Nice, that works. did not know about that syntax .select(.myarea[pos='p2']") – Lou_Ds Commented Nov 4, 2019 at 22:43

1 Answer 1

Selection.filter()

You could select a bunch of elements based on class, and then filter the selection with selection.filter():

svg.selectAll("whatever")
  .filter(function() {
    return d3.select(this).attr("col") == 2; // filter by single attribute
  })

var svg = d3.select("svg");

svg.selectAll("rect")
  .filter(function() {
    return d3.select(this).attr("col") == 2
  })
  .attr("fill","orange");

<script src="https://cdnjs.cloudflare./ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <rect width="20" height="20" x="5" y="5" col="1" row="1"></rect>
  <rect width="20" height="20" x="30" y="5" col="2" row="1" ></rect>
  <rect width="20" height="20" x="5" y="30" col="1" row="2" ></rect>
  <rect width="20" height="20" x="30" y="30" col="2" row="2" ></rect>
</svg>

Using CSS selectors to select by attribute value

But, rather than selecting a bunch of elements and then filtering the selection, we can do everything in one step with the CSS selectors described here. This lets us select elements an attribute they have is equal to a specific value:

svg.selectAll("rect[col='2']")

var svg = d3.select("svg");

svg.selectAll("rect[col='2']")
  .attr("fill","orange");
  
d3.selectAll("rect[col='1'][row='1']")
  .attr("fill","steelblue");

<script src="https://cdnjs.cloudflare./ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <rect width="20" height="20" x="5" y="5" col="1" row="1"></rect>
  <rect width="20" height="20" x="30" y="5" col="2" row="1" ></rect>
  <rect width="20" height="20" x="5" y="30" col="1" row="2" ></rect>
  <rect width="20" height="20" x="30" y="30" col="2" row="2" ></rect>
</svg>

In the above I also use:

d3.selectAll("rect[col='1'][row='1']") to select based on two attribute values.

You can also substitute look for a class rather than a generic tag, so for you this might look like:

d3.selectAll(".myarea[d='BBB'][pos='p2']")