d3 / d3-selection

Transform the DOM by selecting elements and joining to data.

Home Page:https://d3js.org/d3-selection

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Proposal: add sample code for transitions into README docs

curran opened this issue · comments

In order to make the documentation in the README more complete for people looking for the appropriate pattern to use d3.join with transitions, I suggest to add the following snippet directly inside the README, so that one may study it without leaving the page:

    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())
      );

For what it's worth, I personally find this to be a most useful reference that I look to repeatedly. It would be great to skip the steps of clicking through to the Observable notebook, and scrolling down that page to search for this snippet. Thanks!

This is covered by #284, so closing.