D3.js 突出显示g标签内的所有内容，只要鼠标位于所述标签上方。D3

我正在d3中创建一个“手绘”样式图表：

下面的每个条都是

类
条
的
g
内部的
路径。当我将鼠标悬停在每个
g.bar
上时，我会使用一个基本的
鼠标悬停功能突出显示其中的所有路径：

  d3.selectAll('g.bar')
        .on('mouseover', function() {
          d3.select(this).selectAll('path').style('stroke', 'red')
        })


问题是，高亮显示仅在我将鼠标悬停在路径上时出现，而不是整个
g.bar

这使得高亮显示看起来非常容易出错（在其上运行鼠标反复高亮显示/取消高亮显示路径）

我的问题是：当我在整个
g.bar上悬停时，是否有办法让所有相关路径高亮显示，而不仅仅是在路径元素上高亮显示？

下面是我的代码的现场演示：

谢谢你的帮助
 您只需添加以下css即可：

g.bar {
  pointer-events: bounding-box;
}

或者直接设置g.bar元素的指针事件属性，该属性在代码中如下所示：

bar.setAttribute('pointer-events', 'bounding-box');

这将设置
g.bar
元素，以便在它们占用的实际空间（边界框）内的任何位置侦听事件

然而，以上仅适用于Chrome

在我尝试过的所有浏览器中，另一种似乎都适用的替代方法是在每个
g.bar
元素中添加一个透明的rect元素（就像路径的同级元素一样）

我猜这是因为当它落在
路径
的两个笔划之间时，会发生
g.bar
mouseout事件，而不是发生此事件，而是有一个实心的
rect
元素填充空间，即使它是透明的。
非常感谢！我实际上是在尝试类似的东西，但要愚蠢得多（将路径附加到每个矩形上，然后在矩形上放置鼠标）。这更干净：）
data.forEach(function (d) {
  let node = rc.rectangle(0, y(d.trick), x(d.count), y.bandwidth());
  bar = roughSvg.appendChild(node);
  bar.setAttribute('class', 'bar');
});

d3.selectAll('g.bar')
  .data(data)
  .append('rect')
    .attr('x', 0)
    .attr('y', d => y(d.trick))
    .attr('width', d => x(d.count))
    .attr('height', y.bandwidth())
    .attr('fill', 'transparent');