An enter selection contains data items without corresponding document elements. It identifies the new SVG elements that must be created when a visualization’s dataset expands. section 7.4.2 section 7.5
During a D3 data update, the join separates data and elements into enter, update, and exit selections. The enter selection handles creation; the update selection preserves displayed elements; the exit selection removes elements. section 7.4.2
Control an enter selection by passing functions to join():
- Append the required element, such as a circle. section 7.4.2
- Set its class, position, size, color, opacity, and other attributes from the bound datum. section 7.4.2
- Apply a transition to animate the new element into its final position and size. section 7.4.2
Filtering a cetacean scatterplot
Filtering from Northern Hemisphere species to all cetaceans creates new circle elements for the additional species. A keyed join preserves the identity of existing circles, while the enter function appends new circles above the chart with zero radius and opacity before transitioning them into place. section 7.4 section 7.4.2
Listing 7.13 Entering, updating, and exiting selections (interactions.js)
innerChart
.selectAll("circle")
.data(updatedData, d => d.uid)
.join(
enter => enter #1
.append("circle") #2
.attr("class", "cetacean")
.attr("cx", d => xScale(
d.global_population_estimate))
.attr("cy", d => -50)
.attr("r", 0)
.attr("fill", d => colorScale(d.status))
.attr('fill-opacity', 0.6)
.attr("stroke", d => colorScale(d.status))
.attr("stroke-width", 2)
.style('opacity', 0)
.call(enter => enter.transition() #3
.attr("cy", d => yScale(d.max_size_m))
.attr("r", d => rScale(d.max_weight_t))
.style('opacity', 1)),
update => update, #4
exit => exit #5
.call(exit => exit.transition() #6
.attr("cy", d => innerHeight)
.attr("r", 0)
.style('opacity', 0)
.remove())
)
Inspect the complete D3 pattern for appending, styling, positioning, and animating entering circles. section 7.4.2
