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

}）;

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

的JSfiddle

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

感谢您的帮助

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。

要回答您的第二个问题，如果您使用gradient填充{{3}}，并且在同一位置有两个停靠点以突然改变颜色，则可以使用单个rect执行此操作。

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

1 个答案: