How to use @vx/brush - 7 common examples
To help you get started, we’ve selected a few @vx/brush examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hshoff / vx / packages / vx-demo / components / charts / BrushChart.js View on Github 
handleMouseMove(event) {
const { brush, onBrushDrag } = this.props;
// only update the brush region if we're dragging
if (!brush.isBrushing) return;
const { extent: region } = this;
const { x, y } = getCoordsFromEvent(this.svg, event);
onBrushDrag(constrainToRegion({ region, x, y }));
}handleMouseMove(event) {
const { brush, onBrushDrag } = this.props;
// only update the brush region if we're dragging
if (!brush.isBrushing) return;
const { extent: region } = this;
const { x, y } = getCoordsFromEvent(this.svg, event);
onBrushDrag(constrainToRegion({ region, x, y }));
}handleMouseDown(event) {
const { onBrushStart } = this.props;
const { extent: region } = this;
const { x, y } = getCoordsFromEvent(this.svg, event);
onBrushStart(constrainToRegion({ region, x, y }));
}handleMouseUp(event) {
const { brush, onBrushEnd, onBrushReset } = this.props;
const { extent: region } = this;
if (brush.end) {
const { x, y } = getCoordsFromEvent(this.svg, event);
onBrushEnd(constrainToRegion({ region, x, y }));
return;
}
onBrushReset(event);
this.scaleReset();
}handleMouseUp(event) {
const { brush, onBrushEnd, onBrushReset } = this.props;
const { extent: region } = this;
if (brush.end) {
const { x, y } = getCoordsFromEvent(this.svg, event);
onBrushEnd(constrainToRegion({ region, x, y }));
return;
}
onBrushReset(event);
this.scaleReset();
}handleMouseDown(event) {
const { onBrushStart } = this.props;
const { extent: region } = this;
const { x, y } = getCoordsFromEvent(this.svg, event);
onBrushStart(constrainToRegion({ region, x, y }));
}cy={interpolatingStyle.y}
r={3}
/>
);
}}
);
})}
);
}
}
export default withBrush(BrushChart);
