↻ Draggable Arc example New LayerChart example demonstrating how to setup pointer events to create an interactive click and drag arc. Great for setting targets. www.layerchart.com/docs/example... - ThreadSky

About ThreadSky

techniq.dev • 13 days ago

↻ Draggable Arc example

New LayerChart example demonstrating how to setup pointer events to create an interactive click and drag arc. Great for setting targets.

https://www.layerchart.com/docs/examples/Arc#draggable_arc

Comments

coryvirok.bsky.social•13 days ago

Unrelated to Arc, but is there a way to render only 1 tooltip DOM node instead of 1 for each rect? I'm thinking of these simple BarChart examples: https://www.layerchart.com/docs/components/BarChart

techniq.dev•13 days ago

There are multiple tooltip modes set via:

``

Modes include `band` (BarChart default), `bisect-x`, `bisect-y`, `bisect-band`, `bounds`, `voronoi`, `quadtree`, and `manual` (call via pointer events on paths such as Geo/Arc/etc).

https://www.layerchart.com/docs/components/Tooltip

techniq.dev•13 days ago

With that said I need to refine `bisect-band` logic for better targeting that aligns with `band` but doesn't use underlying `Rect` for each band/bar. Once this happens, it will likely become the default for `BarChart`

https://github.com/techniq/layerchart/blob/main/packages/layerchart/src/lib/components/tooltip/TooltipContext.svelte#L238-L265

techniq.dev•13 days ago

Tracking via https://github.com/techniq/layerchart/issues/412

coryvirok.bsky.social•13 days ago

Excellent! Thanks for the info and links!

techniq.dev•13 days ago

It gets a little tricky to handle `paddingInner` and `paddingOuter` of a band scale (along with ``), but just need to focus on refining the impl.

https://d3js.org/d3-scale/band#band_paddingInner

Always open for a PR too 😁

techniq.dev•13 days ago

You will want to use the latest [email protected] which exposes pointer events on the inner track component. You can also create another element to receive the events such as a Circle or another Arc, if desired.

https://github.com/techniq/layerchart/releases/tag/layerchart%400.99.3

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply