D3.js v3 to v4 Brush changes

Question

I\'m looking to migrate from d3v3 to d3v4. In particular i\'m having difficulties in migrating brushes.

Can someone please have a look at below link and let me know

Answer 1

Quick guide for migrating d3-brush from D3 v3 to D3 v4 (example for brushX)

1. Replace d3.svg.brush() with d3.brushX().
2. Rename brushstart event to start, brushend to end.
3. Don't pass scale to .x(xScale), this method is now missing. Pass brush borders as .extent([[xScale.range()[0], 0], [xScale.range()[1], brushHeight]]).
4. In event handler you can get selection as d3.event.selection, for getting selected values use d3.event.selection.map(xScale.invert).
5. To setup selection do .move(brushContainer, selectedDomain.map(xScale)). To clear selection do .move(brushContainer, null). Note that this will fire event handlers.
6. .empty() method is now missing, use d3.event.selection === null.
7. Update your CSS, .extent is now .selection, .resize is .handle and became a rect instead of g containing rect.