d3-selection icon indicating copy to clipboard operation
d3-selection copied to clipboard

selection.appendAll

Open mbostock opened this issue 2 years ago • 3 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)

mbostock avatar Mar 10 '22 17:03 mbostock

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.

Fil avatar Mar 10 '22 20:03 Fil

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")

curran avatar Mar 10 '22 22:03 curran

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.

mbostock avatar Mar 10 '22 23:03 mbostock