Fork of click 的hover效果动画

100%

Fork of click 的hover效果动画

✓ Published0🌍 Public

Last edited Dec 27, 2020

Created on Dec 27, 2020

This example demonstrates animated hover effects on a fruit bowl visualization, where circles represent fruits and change appearance when selected. It shows how enter, update, and exit selections work through D3’s data join, with transitions animating circle radii and positions over one second. The code uses D3 v5 APIs including `scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition.attr`. Hovering sets a selected fruit ID, triggering a black stroke on the active circle. Data updates are timed, removing fruits or changing types, with all rendering handled in SVG.

AI-generated description

A 动画一 click 的hover效果of d3js. HTML page demonstrating use of CSS and JavaScript

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hover to select with D3.js!

A fork of the classic "hover to select" D3.js example animates a row of fruit shapes that respond to mouse interaction. Five apples appear, with hovered fruit highlighted by a black outline; clicking away clears the selection. The visualization demonstrates data joins, updating an SVG circle’s radius and fill via `transition().duration(1000)`. It uses `d3.scaleOrdinal` for color and size, with timed mutations removing and replacing fruit to show enter, update, and exit transitions.

LLidiamir

90% match

Loading thumbnail…

click 的选中效果动画

This example demonstrates the animated selection effect when clicking on circles in an SVG scene. Fruits are rendered as colored and sized circles that change appearance based on their type, and clicking a circle highlights it with a black stroke. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs, along with the custom `fruitBowl` component, which handles enter, update, and exit transitions via the `transition()` method over a 1000-millisecond duration. Data is generated randomly in JavaScript, while the underlying bar chart uses population data from `data.csv`.

HHillKinsh

88% match

Loading thumbnail…

Fork of Fork of Fork of Bowl of fruit - Hovering to Select D3.js!

Five fruit circles, apples and lemons, render in an SVG bowl using D3 v5’s data join pattern. Hovering over a circle selects it, applying a black stroke via the `mouseover` and `mouseout` handlers. The `scaleOrdinal` color and radius scales map fruit types, while entering and exiting circles animate radius changes with `transition().duration(1000)`. A `setSelectedFruit` callback triggers re-renders, demonstrating animated updates as fruits are removed or replaced over time.

CCarloWK1202

87% match

Loading thumbnail…

Hover to Select

This example demonstrates interactive selection in an animated fruit bowl visualization. Rendered as SVG circles with D3 transitions, apples and lemons move and resize smoothly while mouseover events highlight a selected fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and `selection.on` handlers with a stateful `selectedFruit` variable to trigger re-rendering via `fruitBowl`. Data updates through timed mutations, including removing and replacing fruits, show enter, update, and exit transitions.

AArriannePandaraoan

87% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A row of apples animates in using d3 transitions, with hover toggling a black stroke around the selected fruit. The code uses an ordinal color scale and radius scale, with d3 data joins handling enter, update, and exit. D3’s `transition().duration(1000)` animates circle radii and positions, while mouseover and mouseout events call a `setSelectedFruit` callback to update selection state.

Ssheafallick

87% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A fork of the Bowl of Fruit example demonstrates an interactive data join with D3 v7. The visualization renders apples and lemons as SVG circles, which animate their radius and x-position using `transition().duration(1000)` as fruits are added, removed, or replaced. Hovering over a circle triggers a `mouseover` event, invoking `setSelectedFruit` to highlight it with a black stroke; moving the mouse away clears the selection. The code uses D3’s `scaleOrdinal` for color and radius mappings, with a keyed `data` join on fruit IDs to track elements across updates.

TToooooooT

87% match

Loading thumbnail…

click 的选中效果动画

Five fruit circles appear in a row, each clickable to select a black outline around the chosen fruit. The example animates data updates: removing a fruit shrinks it to zero, changing a fruit’s type switches its color and radius, and filtering deletes a circle. Built with D3 v5’s data join and `transition().duration()`, it uses `scaleOrdinal` for color and radius, and renders SVG circles with click handlers updating a `selectedFruit` state.

HHillKinsh

87% match

Loading thumbnail…

Hover of click event pattern

An interactive scatter of five fruit-shaped circles renders in an SVG canvas, where hovering a fruit temporarily highlights it with a black outline, then deselects on mouseout. The demo also cycles through data updates at timed intervals—removing, replacing, filtering, and adding fruits—while preserving smooth transitions. Built with D3 v5, it showcases data joins, `transition().attr()` for animated radius and position changes, and the reusable `fruitBowl` ES6 module pattern for managing upstream state and selection callbacks.

YYanxxx447

86% match