Esto se debe a que el contexto del método roww() no es el contexto adecuado.

Se crea una fila con el siguiente código:

 const row = this.svg .selectAll(".row") .data(this.matrix) .enter() .append("g") .attr("class", "row") .attr("transform", (d, i) => `translate(0,${this.x(i)})`) .each(this.roww);

La última línea llama a this.roww para cada nodo de la selección, pero el contexto de esa función ( this palabra clave dentro this.roww ) está codificada de alguna manera para el objeto del que es miembro, por lo que no recibe el contexto adecuado que debería ser el objeto de nodo real que se relaciona con el DOM .

Para solucionarlo, debe usar una función regular creada con la palabra clave de function (no una función de flecha por la misma razón que la anterior) para que pueda pasar el contexto correcto, aunque su función se basa precisamente en su contexto "principal" ( el otro this ), tendrá que establecer una variable que se refiera a él en el ámbito externo para que pueda leerse dentro de la función:

 // ... const that = this; function fillrow (row) { // eslint-disable-next-line no-unused-vars const cell = d3.select(this).selectAll(".cell") .data(row.filter((d) => dz)) .enter() .append("rect") .attr("class", "cell") .attr("x", (d) => that.x(dx)) .attr("width", that.x.bandwidth()) .attr("height", that.x.bandwidth()) .style("fill-opacity", (d) => that.z(dz)) .style("fill", (d) => that.get_nodes[dx].group === that.get_nodes[dy].group ? that.c(that.get_nodes[dx].group) : null ) .on("mouseover", that.mouseover) .on("mouseout", that.mouseout); } const row = this.svg .selectAll(".row") .data(this.matrix) .enter() .append("g") .attr("class", "row") .attr("transform", (d, i) => `translate(0,${this.x(i)})`) .each(fillrow); // ...