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

Question

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

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

像这样的鼠标悬停事件:

$('#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 填充它的话在同一位置有两个停止点以实现颜色的突然变化。