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

selection.appendAll

mbostock opened this issue · comments

What if this

svg.append("g")
  .appendAll("rect", data)

were shorthand for this

svg.append("g")
  .selectAll()
  .data(data)
  .enter()
  .append("rect")

The latter is a common special case of the data-join, and it seems worthwhile to support it explicitly? Some optimizations:

  • You don’t need a selector (pass undefined to selection.selectAll, which is already optimized)
  • You don’t need a key function (because the initial selection is necessarily empty)
  • You only need the enter selection (because the initial selection is necessarily empty)
  • You don’t need to call selection.order (because the initial selection is necessarily empty)

Besides optimization, the benefit (as I understand it) would be a more straightforward expression of intent in that quite common case; a drawback might be that this new method doesn't allow the user to move from "create" to the "update" pattern if that's what they need.

this new method doesn't allow the user to move from "create" to the "update" pattern if that's what they need.

That's a great point. Migrating code that is designed to be run only once to code that can be run multiple times is one of the biggest pain points of D3 (in my experience at least, this is what students especially struggle with the most).

Maybe the "update" pattern version of the shorthand could look something like this:

one(svg, "g")
  .joinAll("rect", data)

shorthand for

svg
  .selectAll("g")
  .data([null])
  .join("g")
  .selectAll()
  .data(data)
  .join("rect")

Yes, that’s historically why D3 hasn’t included a special API for this case and encourages you to use selection.join instead. But I think it’s totally reasonable to special-case the enter selection, as people already do when they chain enter-append instead of using selection.join.