d3-brush group not recognising mouse events.

[manuarmex]

I am creating my brush in my renderD3 function and append it to the group brushContainer

    function handleBrush() {
            console.log(event.selection)
    }
    this.brush = brushX()
        .extent([[0, 0], [this.chartWidth, 40]])
        .on('start', handleBrush)
        .call(this.brush.move, [0, 300]);;

    brushContainer.append('g')
        .attr('class', styles.brush)
        .attr('id', 'brush')
        .attr('transform', `translate(0, -${BRUSH.height})`)
        .call(this.brush); 

event 'start' is called correctly when changing the brush programatically with 'this.brush.move' and event.selection gets printed, but when trying to mouse click in the brush i get the error:

zone.js?f1f8:195 Uncaught TypeError: Cannot read property 'type' of undefined at Element.started (brush.js?aaed:296)

the error line in the file states "type = event.target.data.type"

Is there something wrong with mouse events when using react-faux-dom?? looks like the event target is not recognised by d3

[Olical]

I could be wrong, but I think brushes are stateful and attempt to mutate the DOM, which doesn't work with React since it needs to be in complete control of the real DOM. I think this question has come up a lot in the past, you may just have to go down the normal "breaking out of the React tree" approach.

[manuarmex]

ok, thank you

[Olical]

This could be caused by using a newer version of D3 that requires more information on the event objects than I originally planned for. So it could just require a small extension to the event code, I can't remember how that works exactly though.

[Olical]

Going to close this for now since it's a bit niche and I think you'd be better served by using D3 on top of the real DOM directly for brushing. I apologise for any inconvenience! Good luck.