I found a

CodePudding user response：

This is because the context of the method roww() is not the proper context.

A row is created with the following code :

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); 

The last line call this.roww for each node of the selection, but the context of that function (this keyword inside this.roww) is somehow hardcoded to the object it is a member of, so it does not receive the proper context which should be the actual node object which relates to the DOM.

To fix that, you need to use a regular function created using function keyword (not an arrow functon for the same reason as above) so that it can be passed the correct context, though since your function precisely relies on its "parent" context (the other this), you will have to set a variable referring to it in the outer scope so it can be read within the function :

// ...

const that = this;

function fillrow (row) {
  // eslint-disable-next-line no-unused-vars
  const cell = d3.select(this).selectAll(".cell")
    .data(row.filter((d) => d.z))
    .enter()
    .append("rect")
    .attr("class", "cell")
    .attr("x", (d) => that.x(d.x))
    .attr("width", that.x.bandwidth())
    .attr("height", that.x.bandwidth())
    .style("fill-opacity", (d) => that.z(d.z))
    .style("fill", (d) =>
      that.get_nodes[d.x].group === that.get_nodes[d.y].group
        ? that.c(that.get_nodes[d.x].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);

// ...