'rect' not rendering even though it's in the source

JavaScript
1

I’m creating a legend.
It does render out the correct HTML as I can see it in the dev tools, but the “rect” does not render (see pics attached). Can anyone explain why?

var legendLabels = data.children.map(d => d.name); //"Product Design","Tabletop Games","Gaming Hardware, (19)
var legendColours = d3.schemeCategory20.map(c => c); //"#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c" (20)

var colourScaleLegend = d3.scaleOrdinal()
 .domain(legendLabels)
 .range(legendColours)

  // create legend
var legend = d3.select('#legend')
 .append('legend')
 .attr('width', 500)
 .attr('height', height)
 .attr("class", "legend")
 .attr('transform', 'translate(' + width + ', ' + 30 + ')');

var legendItem = legend
 .append("g")
 .attr("transform", "translate(60," + 50 + ")")
 .selectAll('g')
 .data(legendLabels).enter().append('g')
 .attr('transform', function (d, i) {
   return 'translate(10,' + i * 25 + ')'
 })
 .append('rect')
 .attr('width', 20)
 .attr('height', 20)
 .attr('class', 'legend-item')
 .style('fill', function (d) {
   return colourScaleLegend(d) 
 })
.append('text') 
 .attr('x', 25)
 .attr('y', 15)
 .text(d  => d);

code
lists