search

uber / react-vis

Data Visualization Components
https://uber.github.io/react-vis
MIT License
8.74k stars 835 forks source link

MarkSeriesCanvas onValueClick not firing #973

Open ChrisLincoln opened 6 years ago

ChrisLincoln commented 6 years ago

I am pretty much a nube and hopefully didn't miss something in the docs. I don't see anything in the API about MarkSeriesCanvas and interactivity.

I have
<MarkSeriesCanvas {...stuff} onValueClick={ (datapoint) => console.log(datapoint) } /> Nothing is getting fired when I click. If I use the SVG version, I get the event. Is this supported in Canvas mode?

mcnuttandrew commented 6 years ago

Hey @ChrisLincoln

You've pointed out an interesting conundrum! We have good support for mouseOver events on canvas but not click! To wit, when you are using MarkSeriesCanvas you want to use onNearestXY and not onValueMouseOver, check out this example for more details https://github.com/uber/react-vis/blob/master/showcase/plot/scatterplot-canvas.js (it looks like the live version of this on docs page is out of date, i'll see what i can do about updating that)

You can get around this by deploy a Voronoi component of your own over the top of the canvas and then supplying onClick listeners there. Like this https://github.com/uber/react-vis/blob/master/showcase/axes/dynamic-crosshair-scatterplot.js

ChrisLincoln commented 6 years ago

Thanks Andrew! I am doing a bit of a face-palm because I remember reading a blog article on medium or somewhere that re-created a complex NYT interactive visual on something to do with the NBA. It used the Voronoi overlay. I just forgot about it. TL;DR I knew of this limitation, knew the work around, but I'm old and I forget things easily.