Skip to main content
SimilarExport ZIP
100%

D3 Nested & Independent General Update Pattern

✓ Published3🌍 Public
CCurran Kelleher
Last edited Oct 21, 2020
Created on Oct 21, 2020

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.

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

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
94% match
Loading thumbnail…

D3 Nested & Independent General Update Pattern

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.

GGrimsas
92% match
Loading thumbnail…

General Update Pattern

This example demonstrates the general update pattern in D3, using a fruit bowl visualization of apples and lemons. The code renders SVG circles with positions and radii determined by ordinal scales, and animates changes over time. Using `selection.join`-style logic with `enter`, `merge`, and `exit` selections, it handles data updates where fruits are added, removed, or change type. React serves as the framework, while D3 v6 drives the transitions and data binding, with each fruit assigned a unique ID via `Math.random()` for stable keying.

Ssravaniboggaram
87% 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
87% match
Loading thumbnail…

General Update Pattern 1

A fruit bowl updates smoothly as apples are eaten and one turns into a lemon, demonstrating D3’s general update pattern. Using `selection.data` with a key function, `enter`, `merge`, and `exit`, the code joins fruit data to SVG circles and text. Transitions animate radius and x-position changes over 1000ms, while a `d3.scaleOrdinal` maps fruit types to colors and sizes.

Ggoodej
87% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern - nested elements

Three rows of fruit demonstrate the D3 general update pattern with nested SVG elements. Apples and lemons are drawn as circles colored by a d3.scaleOrdinal, and each fruit group contains a circle and a text label. The example uses d3.selectAll, enter, merge, and exit selections to handle data changes, with setTimeout calls removing apples or changing one apple into a lemon.

Jjblaskovich
87% 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
87% 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
87% match