Hylograph.Internal.Selection.Operations.Selection

select :: forall m datum. MonadEffect m => String -> m (Selection SEmpty Element datum)

Select a single element matching the CSS selector

Returns an empty selection (no data bound). The datum type is polymorphic and will be inferred from usage. This is typically the starting point for data binding.

Example:

svg <- select "svg"
circles <- renderData Circle [1, 2, 3] "circle" svg ...

selectElement :: forall m datum. MonadEffect m => Element -> m (Selection SEmpty Element datum)

Select from a DOM element directly

This is useful for framework integration (React, Vue, etc.) where you have a reference to a DOM element rather than a CSS selector.

Example:

selectElement element >>= renderTree myVisualization

selectAll :: forall state parent parentDatum datum m. MonadEffect m => String -> Selection state parent parentDatum -> m (Selection SEmpty Element datum)

Select all elements matching the CSS selector within a parent selection

Returns an empty selection (no data bound yet). The datum type is polymorphic and will be inferred from usage. Use this for nested selections.

Example:

svg <- select "svg"
groups <- selectAll "g" svg

selectAllWithData :: forall state parent parentDatum datum m. MonadEffect m => String -> Selection state parent parentDatum -> m (Selection SBoundOwns Element datum)

Select all elements matching selector and extract their bound data

Use this when selecting child elements that have inherited data from their parent. This is necessary when you want to use the selection with transitions that need access to the bound data (like withTransitionStaggered).

Example:

-- After creating nodes with appendChildInheriting
groups <- selectSimulationGroups
circles <- selectAllWithData "circle" groups.nodes
withTransitionStaggered config delayFn circles [fill colorByDepth]