d3-selection
d3-selection copied to clipboard
selection.appendAll
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.