Transform the DOM by selecting elements and joining to data.

Sized donut multiples

Multitouch done right

Mike Bostock

General Update Pattern

d3-selection 2.0

selection.join

D3 Documentation

d3-selection

The variable for "monospace fonts" seems to have changed since this notebook was created. `--mono_fonts` should now be `--monospace-font`, I believe.

Brooks Boyd

This is a great pattern. 

Quick question: is it possible to use the await keyword with this pattern and base the promise on the end of the transition instead of the promise that is based on ticks.

Context: if you use multiple transitions in an update patterns combined with a delay, it will not be obvious to calculate the exact duration of the transition and it would be great to use `await` / `transition.end()` to resolve the promise. 

However, I haven't found a way to make this work.

Thanks!

Ralph Spandl

This awesome. But this last tidbit is probably going to make me crazy. To clarify : join take a single string as an argument. Or arrow functions for enter, exit and update. Are those arguments? Must they be in order? Must there be only 3? You use call -m ass opposed to each - because it returns the selection?

Dan DeLorenzo

Yes the method's prototype is selection.join(enter[, update][, exit]) (see https://github.com/d3/d3-selection/blob/master/README.md#selection_join ). Using call() because it returns the selection.

alternatively use .transition()……….selection() to merge

Just pointing out from a poor color-blinded guy: would it be possible to select colors (and maybe font weights) to improve readability of the transitions?
Thanks

Enrico Spinielli

Why is it that we cannot "add" selections/appends/joins underneath the `create` line like a normal selection?

leon todd johnson

We can! However this pattern is necessary here because we need to display the svg node.

An alternative would be:

```
d3.create("svg")
      .attr("width", width)
      .attr("height", 33)
      .attr("viewBox", `0 -20 ${width} 33`)
  .call((svg) => svg.selectAll("text")
    .data(randomLetters())
    .join("text")
      .attr("x", (d, i) => i * 16)
      .text(d => d)
  )
  .node()
```

Ah, I think I get it ... Also, WOW thank you for such a quick response!!

Just to make sure I understand, the following code would NOT work *because* the `.selectAll` portion makes the final selection (return) "text" and not the SVG. Using `call` ensures that we call the selection/data-join on the SVG, but still return the SVG at the end. Right?

```
d3.create("svg")
      .attr("width", width)
      .attr("height", 33)
      .attr("viewBox", `0 -20 ${width} 33`)
  .selectAll("text")
    .data(randomLetters())
    .join("text")
      .attr("x", (d, i) => i * 16)
      .text(d => d)
  .node()
```

yes: this would return the first text node

Awesome! This makes perfect sense now. Thank you!