D3 JS tooltips fire mouseover event

Question

Я сделал слегка измененную гистограмму, чтобы добавить дополнительную панель поверх исходных данных, когда значение бара превышает целевое значение. Это просто, так что я могу изменить цвет панели на красный.

Теперь я пытаюсь запустить событие mouseover на исходном баре, когда красный загорается, но событие, похоже, не срабатывает должным образом. Если я изменил CSS на панели или попытаюсь прочитать данные из него, он отлично работает.

Mouseover событие следующим образом:

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

});

Вот JSfiddle того, что у меня есть http://jsfiddle.net/6LCdW/11/

Кроме того, есть ли способ я могу удалить перекрывающийся красную полосу и просто изменить цвет в верхней части синих баров, где это необходимо?

Спасибо за любую помощь

Answer 1

Короткая версия: вы установите pointer-events: none; для перекрывающихся баров.

Несколько дополнительных комментариев к вашему коду. Во-первых, я бы посоветовал не смешивать D3 и JQuery, если вам абсолютно не нужно - это позволит избежать много путаницы позже.

Во-вторых, способ добавления этих перекрывающихся баров D3 состоит в том, чтобы не добавлять их по одному, а скорее фильтровать данные, которые их добавляют. То есть код для их добавления будет

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); }); 

Нет необходимости в явном цикле или условном заявлении. Полный пример here.

Чтобы ответить на второй вопрос, вы можете сделать это с помощью одного rect, если вы его заполняете gradient, который имеет две остановки в том же положении, чтобы произвести резкое изменение цвета.