selection.merge(transition…)?

[Fil]

d3-selection@2 release notes mention:

selection.merge(transition) now throws an error to make it more obvious when you attempt to merge a selection with something that’s not, say because you mistakenly returned a transition from your selection.join’s update function.

However thanks to #248 selection.merge could call transition|selection.selection() before merging.

This would simplify a lot the examples in https://observablehq.com/@d3/selection-join.

svg.selectAll("text")
      .data(randomLetters(), d => d)
      .join(
        enter => enter.append("text")
            .attr("fill", "green")
            .attr("x", (d, i) => i * 16)
            .attr("y", -30)
            .text(d => d)
          .transition(t)
            .attr("y", 0), // 🧨
        update => update
            .attr("fill", "black")
            .attr("y", 0)
          .transition(t)
            .attr("x", (d, i) => i * 16), // 🧨
        exit => exit
            .attr("fill", "brown")
           .transition(t)
            .attr("y", 30)
            .remove()
      );

Note that we can already do:

svg.selectAll("text")
      .data(randomLetters(), d => d)
      .join(
        enter => enter.append("text")
            .attr("fill", "green")
            .attr("x", (d, i) => i * 16)
            .attr("y", -30)
            .text(d => d)
          .transition(t)
            .attr("y", 0)
          .selection(), // 🤘
        update => update
            .attr("fill", "black")
            .attr("y", 0)
          .transition(t)
            .attr("x", (d, i) => i * 16)
          .selection(), // 🤘
        exit => exit
            .attr("fill", "brown")
           .transition(t)
            .attr("y", 30)
            .remove()
      );

[curran]

I like this line of thinking.

Currently the de facto reference example does the following:

    svg.selectAll("text")
      .data(randomLetters(), d => d)
      .join(
        enter => enter.append("text")
            .attr("fill", "green")
            .attr("x", (d, i) => i * 16)
            .attr("y", -30)
            .text(d => d)
          .call(enter => enter.transition(t)
            .attr("y", 0)),
        update => update
            .attr("fill", "black")
            .attr("y", 0)
          .call(update => update.transition(t)
            .attr("x", (d, i) => i * 16)),
        exit => exit
            .attr("fill", "brown")
          .call(exit => exit.transition(t)
            .attr("y", 30)
            .remove())
      );

I think it does not matter what is returned by exit, so that can already be simplified to:

    svg.selectAll("text")
      .data(randomLetters(), d => d)
      .join(
        enter => enter.append("text")
            .attr("fill", "green")
            .attr("x", (d, i) => i * 16)
            .attr("y", -30)
            .text(d => d)
          .call(enter => enter.transition(t)
            .attr("y", 0)),
        update => update
            .attr("fill", "black")
            .attr("y", 0)
          .call(update => update.transition(t)
            .attr("x", (d, i) => i * 16)),
        exit => exit
            .attr("fill", "brown")
          .transition(t)
            .attr("y", 30)
            .remove()
      );

If selection.merge(transition) did what you suggest here (use the underlying selection), then the example could be simplified to:

    svg.selectAll("text")
      .data(randomLetters(), d => d)
      .join(
        enter => enter.append("text")
            .attr("fill", "green")
            .attr("x", (d, i) => i * 16)
            .attr("y", -30)
            .text(d => d)
          .transition(t)
            .attr("y", 0),
        update => update
            .attr("fill", "black")
            .attr("y", 0)
          .transition(t)
            .attr("x", (d, i) => i * 16),
        exit => exit
            .attr("fill", "brown")
          .transition(t)
            .attr("y", 30)
            .remove()
      );

This would be quite nice.

[curran]

Here's a starting point for a PR that adds this #285

[curran]

Here's an alternative idea that enables the same simplification to usage of .join, but does not touch .merge: #286