# D3 join breaks if run a second time

**URL:** <https://talk.observablehq.com/t/d3-join-breaks-if-run-a-second-time/5262>\
**Category:** Help\
**Created:** [June 28, 2021, 6:09am UTC](https://talk.observablehq.com/t/d3-join-breaks-if-run-a-second-time/5262 "2021-06-28T06:09:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [June 28, 2021, 6:09am UTC](https://talk.observablehq.com/t/d3-join-breaks-if-run-a-second-time/5262/1 "2021-06-28T06:09:13Z")

</div>

I’m still trying to understand the .join of d3. I have this notebook that works fine 1st time, but for I run the dis cell a second time, it freaks out.

> **[Question Why 2nd running of cell fails](https://observablehq.com/@hellonearthis/question-why-2nd-running-of-cell-fails)**

```auto
  const text = d3.select('#radar_text')             
    .selectAll('div')
      .data(quadrants)
    .join('div')
      .attr('id',d => d)
      .html(d => `<h3 style="background-color:Tomato;">${d}</h3>`);

```

Any help welcome.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 28, 2021, 6:52am UTC](https://talk.observablehq.com/t/d3-join-breaks-if-run-a-second-time/5262/2 "2021-06-28T06:52:58Z")

</div>

On the first run there are no divs inside the container, and join creates a div for each datum; but then the code adds others divs as children of those divs. On the second run, the selectAll(“div”) doesn’t discriminate between the div you have joined and their children, and it doesn’t go well.

To fix the issue you could selectAll(".thing") and add a “thing” class on the divs you join. You’ll then have another issue to fix, which is that the code will still want to add the same contents to divs that already have contents.

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [June 28, 2021, 10:32am UTC](https://talk.observablehq.com/t/d3-join-breaks-if-run-a-second-time/5262/3 "2021-06-28T10:32:27Z")

</div>

I’m not sure how to correctly do the selection so it only joins the data once.  
Adding a class would not be cool as it would add duplicates…

I think _join_ is an update from using the ‘_enter update exit_’ pattern, am I wrong in this thinking?

I don’t get this when working with SVG.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 28, 2021, 10:50am UTC](https://talk.observablehq.com/t/d3-join-breaks-if-run-a-second-time/5262/4 "2021-06-28T10:50:49Z")

</div>

Yes, _join_ is a simplification of the _enter update exit_ pattern.

Another way to fix this issue might be to replace selectAll by selectChildren, so you don’t select any divs below the first level:

```auto
text = d3
    .select("#rtext") // should all be visabley none
    .selectChildren("div") // <= instead of selectAll
    .data(BS)
    .join("div")

```

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [June 28, 2021, 7:05pm UTC](https://talk.observablehq.com/t/d3-join-breaks-if-run-a-second-time/5262/5 "2021-06-28T19:05:43Z")

</div>

Thanks @Fil that works perfectly.