score:2

In your snippet...

d3.selectAll("g.type").filter(g_element => g_element.class !== "whatever");

... the first argument, which you named g_element, is the datum bound to that element. As there is no data bound here, that's obviously undefined.

To get the element instead, you have to use this. However, since you're using a arrow function here, you need to use the second and third arguments combined:

d3.selectAll("g.type")
    .filter((_,i,n) => console.log(n[i]))

Then to get the classes, you can simply use a getter...

d3.selectAll("g.type")
    .filter((_,i,n) => console.log(d3.select(n[i]).attr("class")))

Or, even simpler, using classList:

d3.selectAll("g.type")
    .filter((_, i, n) => console.log(n[i].classList))

Here is the demo:

function create() {
  let g = d3.select("body")
    .append("svg")
    .attr("height", "500")
    .attr("width", "500")
    .append("g");

  g.append("g")
    .attr("class", "type type-red")
    .attr("data-color", "red")
    .append("circle")
    .attr("r", 50)
    .attr("fill", "red")
    .attr("cx", 50)
    .attr("cy", 50);

  g.append("g")
    .attr("class", "type type-green")
    .attr("data-color", "green")
    .append("circle")
    .attr("r", 50)
    .attr("fill", "green")
    .attr("cx", 200)
    .attr("cy", 50);

  g.append("g")
    .attr("class", "type type-blue")
    .attr("data-color", "blue")
    .append("circle")
    .attr("r", 50)
    .attr("fill", "blue")
    .attr("cx", 100)
    .attr("cy", 150);

  filter_out();
}

/***************** USING THE SELECTOR ********************/
function filter_out() {
  d3.selectAll("g.type")
    .filter((_, i, n) => console.log(n[i].classList))
    .attr("opacity", 0.5);
}
create();
<script src="https://d3js.org/d3.v4.js"></script>


Related Query

More Query from same tag