D3 JS 工具提示触发鼠标悬停事件

Question

我做了一个稍微修改的条形图，当条形的值超过目标值时，在原始数据的顶部添加一个额外的条。这只是为了让我可以将条形的颜色更改为红色。

现在，当红色鼠标悬停在原始栏上时，我尝试在原始栏上触发 mouseover 事件，但该事件似乎没有正确触发。如果我更改栏上的 CSS 或尝试从中读取数据，它工作正常。

鼠标悬停事件如下：

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

});

这是我所拥有的 http://jsfiddle.net/6LCdW/11/ 的 JSfiddle

或者，有没有办法可以删除重叠的红色条，并在必要时更改蓝色条顶部的颜色？

感谢您的帮助

Answer 1

短版：您为重叠条设置​​pointer-events: none;。

不过，您的代码中还有几个额外的 cmets。首先，我建议不要将 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 填充它。