search

dc-js / dc.js

Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js
Apache License 2.0
7.41k stars 1.81k forks source link

dc.js Compatibility issue with vuetify: brush does not work #1456

Open tardyp opened 6 years ago

tardyp commented 6 years ago

Hi, Please see this fiddle: https://jsfiddle.net/tardyp/7hwo1zq3/

It contains a link to vuetify css, which is a UI framework for vue. (i kept it in html for clarity reasons)

If I keep the vuetify css, the brush does not display, and the cursor does not turn into cross.

If I remove the link, the brush work as expected.

I've spend the afternoon scratching my head about it, to finally realize there is something in vuetify.css that is messing with the event handling.

tardyp commented 6 years ago

After more debug, it looks like vuetify defines overlay class with:

.overlay {
    pointer-events: none; 
}

the overlay rect has a svg attribute pointer-events='all', but this is overruled by the css.

So the workaround is to create a css rule with more priority.

svg rect.overlay {
    pointer-events: all;
}