D3 JS tooltips fire mouseover event

Question

I have made a slightly modified bar chart to add an extra bar over the top of the original data when the value of the bar goes over a target value. This is just so that I can change the colour of the bar to red.

Now I'm trying to fire the mouseover event on the original bar when the red one is hovered over, but the event doesn't seem to fire properly. If I change the CSS on the bar or try to read data from it, it works fine.

Mouseover event like so:

$('#chart-canvas').on('mouseover', '.over-target', function() {
var xBar = $(this).attr('x');
$('#chart-canvas').find('.bar:not(.over-target)[x="'+xBar+'"]').trigger('mouseover');

});

Here's a JSfiddle of what I have http://jsfiddle.net/6LCdW/11/

Alternatively, is there a way I can remove the overlapping red bar and just change the colour at the top of the blue bars where necessary?

Thanks for any help

Answer 1

Short version: you set pointer-events: none; for the overlapping bars.

A couple of additional comments on your code though. First, I would advise against mixing D3 and JQuery unless you absolutely need to -- it avoids much confusion later on.

Second, the D3 way of adding those overlapping bars would be to not add them one by one, but rather filter the data that adds them. That is, the code to add them would become

svg.selectAll(".bar.over-target")
   .data(data.filter(function(d) { return +d.value > +d.target; }))
   .enter()
   .append("rect")
   .attr("class", "bar over-target")
   .attr("x", function(d) { return x(d.date); 
   .attr("width", x.rangeBand())
   .attr("y", function(d) { return y(d.value); })
   .attr("height", function(d) { return y(d.target) - y(d.value); });

No explicit loop or conditional statement needed anymore. Complete example here .

To answer your second question, you can do this with a single rect if you're filling it with a gradient that has two stops at the same position to effect a sudden change in color.