Why is the brush preventing dc.js barChart toolTip

Question

I don't see why that behaviour was implemented. Any good reason ?

Answer 1

In order to have a brushing function, a transparent rectangle that captures all mouse events has to be drawn over top of the graph. That prevents any mouse events from triggering the tooltip event handler on the main graph elements, and is the reason the dc.js API warns that leaving brushing behaviour "on" will disable all other interactive behaviour.

If you want both behaviours, consider using a focus + context layout. That example uses plain d3, but you could recreate it with dc.js. Just have two different views of the same data, one with the brush and one with the tooltips or other interactivity.

Answer 2

You can use https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events to block 'mouseover' event for brush so that tooltips are enabled. Then on chart you can create a custom 'mousedown' event and pass it to brush to enable selection

d3.select('.chartContainer').on('mousedown', function(){
                    brush_elm = self.scrubberContent.select(".brush").node();
                    new_click_event = new Event('mousedown');
                    new_click_event.pageX = d3.event.pageX;
                    new_click_event.clientX = d3.event.clientX;
                    new_click_event.pageY = d3.event.pageY;
                    new_click_event.clientY = d3.event.clientY;
                    brush_elm.dispatchEvent(new_click_event);
                });

Answer 3

I had a similar issue using d3 code. I realized that moving the tooltip event after the brush event fixed the problem. For me, it looked like this:

 svg.append("g")
     .attr("class", "brush")
     .call(brush);

 svg.selectAll('circle')
     .data(humidity_data)
     .enter()
     .append('circle')
     .attr('class', 'humidity_point')
     .attr('cx', function(d) {
         return x(d['date'])
     })
     .attr('cy', function(d) {
         return y(d['Humidity'])
     })
     .attr('r', 4)
     .attr('fill', '#428bca')
     .on("mouseover", function(d) {
         div.transition()
             .duration(200)
             .style("opacity", .9);
         div.html(d.Custody + '<br>' + d.City + ', ' + d.Country + '<br>' + d.Humidity + '%')
             .style("left", (d3.event.pageX) + "px")
             .style("top", (d3.event.pageY - 28) + "px");
         })
     .on("mouseout", function(d) {
         div.transition()
             .duration(1500)
             .style("opacity", 0);
     });

This code allowed brushing, but retained the ability to hover over a circle element and see metadata.