# d3 join works in visual web developer but not in Observable

**URL:** <https://talk.observablehq.com/t/d3-join-works-in-visual-web-developer-but-not-in-observable/4363>\
**Category:** Uncategorized\
**Created:** [December 22, 2020, 5:53pm UTC](https://talk.observablehq.com/t/d3-join-works-in-visual-web-developer-but-not-in-observable/4363 "2020-12-22T17:53:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![StevePegg](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/stevepegg/32/3924_2.png) [@StevePegg](https://talk.observablehq.com/u/StevePegg)\
**Post date:** [December 22, 2020, 5:53pm UTC](https://talk.observablehq.com/t/d3-join-works-in-visual-web-developer-but-not-in-observable/4363/1 "2020-12-22T17:53:52Z")

</div>

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](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](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;
            });
```

---

<div class="post-metadata">

**Author:** ![StevePegg](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/stevepegg/32/3924_2.png) [@StevePegg](https://talk.observablehq.com/u/StevePegg)\
**Post date:** [December 23, 2020, 10:40pm UTC](https://talk.observablehq.com/t/d3-join-works-in-visual-web-developer-but-not-in-observable/4363/2 "2020-12-23T22:40:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![StevePegg](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/stevepegg/32/3924_2.png) [@StevePegg](https://talk.observablehq.com/u/StevePegg)\
**Post date:** [December 24, 2020, 9:42am UTC](https://talk.observablehq.com/t/d3-join-works-in-visual-web-developer-but-not-in-observable/4363/3 "2020-12-24T09:42:02Z")

</div>

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