Vue3 - D3 adding a path to a cell - not visualized

I found a GitHub version of Mike Bostock's adjacency matrix visualization, using data from Les Miserables.

I transformed it into Vue3 code, and with the help of this community, got a functional prototype.

In my offline d3 code, I implemented some d3 code that added a path to each cell, which worked fine:

cell
.append("path")
.filter(function(d) { return ((d.z % 231== 0) | d.z ==231) })
.attr("d", "M 8.4 70 L 0 70 L 0 0 L 9.8 0 L 35 48.8 L 60 0 L 69.9 0 L 69.9 70 L 61.5 70 L 61.5 15 L 38.1 60 L 31.8 60 L 8.4 15.1 L 8.4 70 Z")
.attr("fill", "#030104")
.attr("opacity", function(d) {  return  z(d.z); })
.attr("class", "icon")
.attr("width", x.rangeBand())
.attr("height", x.rangeBand())
.attr("transform", function(d, i) {
                var scale = (x.rangeBand()/((this.getBBox()['height']+this.getBBox()['width'])/2)*0.9);
        var marginTop = (x.rangeBand()-(this.getBBox()['height']*scale))/2;
        var marginLeft = (x.rangeBand()-(this.getBBox()['width']*scale))/2;
            return "translate(" + (x(d.x)+marginLeft) + ", " + marginTop + ")scale("+ scale +")";
    })

However, I can't get it to work in Vue. I already fixed the rangeBand to bandwidth and some other small things. But nothing is getting visualized. Perhaps this functionality is not supported anymore by this newer d3 version?

Here is an online version of the transformed visualization in Vue3 format: https://codesandbox.io/s/sweet-gould-dejiuj?file=/src/components/Miserables.vue (click on the Miserable link, the concerned code is located on line 1912).

from Vue3 - D3 adding a path to a cell - not visualized