d3 join works in visual web developer but not in Observable

Hi,
I have updated a working chart to utilise the join() function. However, the selection doesn’t fill until zoom is triggered and then rects appear on redraw. Any ideas why the chart isn’t initially populated?

link to broken version: https://observablehq.com/@steve-pegg/visual-planning-vp3-wip-not-currently-working-see-forum-pos

link to original: https://observablehq.com/@steve-pegg/visual-planning-vp1

The join() code is highlighted below:

group = env.g.selectAll(".rectangle")
.data(env.structData)
.join(function (group) {
var enter = group.append(“g”).attr(“class”, “rectangle”).append(“svg”).attr(“class”, function (d) { return "svgholder " + d.clas; });
enter.append(“rect”).attr(“class”, function (d) { return "rectband " + d.clas; });
enter.append(“text”).attr(“class”, function (d) { return "interval " + d.clas; });
enter.append(“rect”).attr(“class”, function (d) { return "lefthand clasl " + d.clas; });
enter.append(“rect”).attr(“class”, function (d) { return "righthand clasr " + d.clas; });

                return enter;
            });

Resolved by updating selections in draw() to env.g.selectAll(".rectangle") and env.group.selectAll(“rectband”).

Hi Can someone explain why d3.selectAll didn’t work but after the zoom update trigger of redraw it did/does?