Skip to main content
SimilarExport ZIP
100%

D3 Nested & Independent General Update Pattern

✓ Published0🌍 Public
GGrimsas
Last edited Oct 24, 2020
Created on Oct 24, 2020

This example demonstrates a nested General Update Pattern where each fruit group contains an independent, data-driven set of rectangles. The code shows how to use `selection.each` with the old-school `function` notation to access `this`, then create a new D3 selection via `select` for each `<g>` element. This allows a different number of rectangles per fruit, with sizes varying by fruit type. The visualization responds to data changes—adding, removing, and modifying fruits—updating both the outer groups and their inner rectangles through separate update patterns. It renders to SVG using D3 v6.

AI-generated description

A response to a question in the D3 Slack about different numbers of nested rectangles.

Original question by May Tan:

What i'm trying to do is add varying number of rectangles based on "num" in the data. The size of rectangle depends on the type of fruit. I realise that the rect size did update when the apple is changed into a lemon. However rect size didn't update on the last update when apple was eaten. My question is how do I write the selections when the data join is not based on number of array items, but range of some data. I am also sure i'm writing the update part wrongly as the size of rect did not get updated. Thanks for your help!

Answer:

Ahh I see what you mean. You want to essentially "break out" into a new update pattern, within each <g> element, so that each has its own unique data driven collection of rectangles. Here's a solution for it:

const groups = groupsEnter.merge(groupsUpdate);

groups.each(function (d) {
  const innerGroup = select(this);
  const rects = innerGroup
    .selectAll('rect')
    .data((d) => d3.range(d.num).map(() => d));

  rects
    .enter()
    .append('rect')
    .attr('height', '30px')
    .attr('stroke', 'black')
    .merge(rects)
    .attr('y', (d, i) => -40 * (i + 1))
    .attr('width', (d) => radiusScale(d.type));

  rects.exit().remove();
});

The trick is to use selection.each (and the old school function notation to access this) to isolate the DOM nodes for the groups (exposed by D3 as this), then use select to create a new D3 selection for each individual <g> element. With this in hand, we can have another nested but totally independent General Update Pattern, allowing us to make a different number of rectangles for each group.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Nested & Independent General Update Pattern

D3’s nested General Update Pattern manages a variable number of rectangles inside each fruit group, responding to changes in fruit type and count. Apples appear as red circles with wider bars, lemons as yellow with narrower ones; removing a fruit deletes its entire group. The implementation uses `selection.each` to isolate each `<g>` element, then applies the inner update pattern with `selectAll` and `data`, merging enter and update selections via `merge`. SVG rendering handles all visual output, with `scaleOrdinal` mapping fruit types to colors and sizes.

CCurran Kelleher
92% match
Loading thumbnail…

D3 Nested & Independent General Update Pattern

This example demonstrates an animated fruit bowl where apples and lemons are added, removed, and resized, showing how nested groups of rectangles update independently within each fruit group. The code uses D3’s General Update Pattern twice: first to manage the outer `<g>` elements for each fruit, then, inside a `selection.each` callback, to handle the inner rectangles per group via `selectAll('rect')` and `.data()`. The inner rectangles’ width is driven by `radiusScale(d.type)`, while their quantity is set by `d3.range(d.num)`.

Vvaporpin
92% match
Loading thumbnail…

Bowl of Fruit - Nested Version of General Upate Pattern

This example demonstrates the general update pattern in D3.js, showing how data joins handle entering, updating, and exiting elements. A bowl of fruit (rendered as circles) initially contains five apples; over time, fruits are removed, a lemon replaces an apple, and a specific fruit is filtered out. Using `selection.enter()`, `selection.merge()`, and `selection.exit()`, the nested SVG groups update their positions and styles via ordinal scales for color and radius. The code relies on D3 v5’s `scaleOrdinal` and manual timeouts to trigger state changes, with SVG rendering for all visual elements.

TThamjith Thaha
83% match
Loading thumbnail…

General Update Pattern

This example demonstrates the general update pattern in D3.js, showing how data joins handle enter, update, and exit selections. A row of apples is drawn as SVG circles with labels, then undergoes timed changes: removing the last fruit, replacing an apple with a lemon, and filtering out an item. The `fruitBowl.js` module uses `scaleOrdinal` for color and radius, while `index.js` orchestrates state changes with `setTimeout`. Each render call invokes `selection.selectAll` and `.data()`, applying enter/merge/exit operations for both circles and text elements.

Vvkanotra
83% match
Loading thumbnail…

Bowl of fruit - General Update Pattern (Nested)

This example demonstrates the general update pattern with nested selections in D3 v5, showing a row of fruit that changes over time as apples are eaten and replaced by lemons. The visualization uses a static SVG bowl rendered from a rect, while fruit groups are bound to array data and updated through enter, merge, and exit selections. The code applies ordinal scales for color and radius to distinguish apple and lemon types, and employs d3.select, scaleOrdinal, and selection methods to manage the transitions.

Ppkcesar
83% match
Loading thumbnail…

D3 Starter - General update pattern Nest grouped version

This example demonstrates the D3 general update pattern with a nested group structure, showing how a data array of fruit items maps to SVG circles and text labels. The data starts with five apples, then animates through a lemon replacing an apple, and two apples being removed, all at one-second intervals. Using `d3.select` and `d3.range`, the `fruitBowl` function appends `<g>` groups, merging enters and updates, while exits are removed. It uses ordinal scales for color and radius based on fruit type, rendering with SVG.

Mmaxthamt
83% match
Loading thumbnail…

General Update Pattern

This example demonstrates the D3 general update pattern for data joins, where circles representing fruit enter, update, and exit with animated transitions. Fruits are drawn as SVG circles sized and colored by type via `d3.scaleOrdinal`, with positions calculated from array indices. The code uses `selection.data`, `selection.enter`, `selection.merge`, and `selection.exit` to handle updates, paired with `transition.attr` methods over one-second durations. A sequence of `setTimeout` calls modifies the fruit array by removing, changing, and splicing elements, showing how the visualization responds to data changes.

Ccarlos157oliveira
83% match
Loading thumbnail…

General Update Pattern for Nested Items

Animated fruit bowl demonstrates the general update pattern for nested selections in D3. Circles and labels enter, update, and exit as fruits are added, removed, or change type. The code uses `selection.enter()`, `merge()`, and `exit().remove()` with key functions on `d.id`. Transitions via `transition().duration()` animate radius changes, while `scaleOrdinal` maps fruit types to colors and sizes. The example runs scripted `setTimeout` changes to drive the updates.

MMatt Morris
83% match