click 的选中效果动画

100%

click 的选中效果动画

✓ Published1🌍 Public

Last edited Dec 21, 2020

Created on Dec 21, 2020

Forked from 动画

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Click to select with D3.js!

Five fruit circles animate into a bowl, each colored by fruit type via a d3.scaleOrdinal color scale. Clicking a circle selects it, giving it a black stroke, while transitions update positions and radii. The example demonstrates data joins with selection.data, enter/merge/exit patterns, and d3.transition for smooth updates, including removal and type changes timed with setTimeout.

LLidiamir

89% match

Loading thumbnail…

click to select

Five circles represent fruit in a bowl, rendered as SVG by D3 v5. Clicking a fruit selects it, highlighting it with a black stroke. A data join with keyed enter, update, and exit transitions animates shape changes: plums shrink and disappear, and one plum transforms into a lemon. The example uses d3.scaleOrdinal for color and radius, and transitions via `selection.transition()` with a duration of 1000ms.

Bbencestubnya

89% match

Loading thumbnail…

Click to select

Five fruits, rendered as colored circles in a bowl, respond to clicks by acquiring a black outline to indicate selection. The SVG visualization demonstrates dynamic updates using D3.js v5 within a React framework, where the `fruitBowl` function handles enter, update, and exit transitions. Animated with `transition().duration(1000)`, fruits shrink on removal and change color when swapped. The example shows D3’s `scaleOrdinal` for color and radius mappings and `select` for DOM manipulation, illustrating core data-binding and lifecycle management.

Ggorfoula

88% match

Loading thumbnail…

Fruit: Click to Select

This example demonstrates five fruits as circles that grow into apples or lemons over time. A user can click any fruit to select it, which adds a black stroke. Data updates remove fruits, change types, and trigger smooth size transitions using the D3 v5 selection API and `transition().duration()`, while the `scaleOrdinal` scales map fruit types to colors and radii.

LLeora Wenger

87% match

Loading thumbnail…

Click to select

Five fruit circles animate into a row, with apples rendered large and red while lemons appear smaller and yellow. Clicking a circle selects it, highlighting it with a black stroke. The visualization uses d3.js v5 with the data-join pattern in `fruitBowl.js`, employing ordinal scales for color and radius, and transitions to animate entering, updating, and exiting circles over time.

RRoger Yu-Hsiang Lo

87% match

Loading thumbnail…

Fork of click 的hover效果动画

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.

HHillKinsh

87% match

Loading thumbnail…

Fruits Basket - Click to Select

Five circles representing apples and lemons transition smoothly into new positions and sizes, with a black stroke highlighting the most recently clicked fruit. The visualization demonstrates enter, update, and exit selections through D3's data join, using `scaleOrdinal` for color and radius mappings. `transition().duration(1000)` animates position and radius changes, while click events trigger re-rendering with the newly selected fruit highlighted.

Ddanielchamone

86% match