Javascript 嵌套组中未激发d3鼠标输出

我在D3中构建了一个图，其中节点可以有多种颜色（例如，节点的

120°

为蓝色，另一个

120°

切片为绿色，其余的

120°

为黄色）。 因此，节点基本上不再是一个

SVG圆圈

元素，而是一个基于

路径

元素的

饼图

出于交互性的原因，如果用户将鼠标悬停在饼图上，我会增加它的半径。为了缩小规模，我想听听

mouseout

事件。我的问题是，我的事件侦听器没有在

mouseout

上启动。但是，它确实会在鼠标上方触发：

let node = this.nodeLayer.selectAll('.node')
     .data(data, (n) => n.id);
node.exit().remove();

let nodeEnter = node.enter()
  .append('g')
  .attr('id', (n) => `calls function that generates a unique ID`)
  .on('mouseover', this.nodeMouseOverHandler)
  .on('mouseout', this.nodeMouseOutHandler)

如果我只想显示一种颜色，我会渲染一个

圆圈

。如果我想显示一种以上的颜色，我会渲染一个

饼图

nodeEnter.merge(node).each((d, i, nodes) => {
   // call a function that returns a radius depending on whether the mouse pointer is currently hovering over the node
   const radius = ...


   // if I want to render one color
   nodeEnter.append('circle')
      //... customize

   // if I want to render multiple colors
   const arc = d3.arc()
      .innerRadius(0)
      .outerRadius(radius);

   const pie = d3.pie()
     .value((d) => 1)
     .sort(null);

   // dummy colors
   const colors = ['#ff0000', '#00ff00];
   enter.append('g')
     .selectAll('path')
     .data(pie(colors))
     .enter()
     .append('path')
     .attr('shape-rendering', 'auto')
     .attr('d', arc)
     .attr('fill', (d, i) => {
       return colors[i];
     })
     .on('mouseout', (d, i, elems) => {
        console.log('mouseout in subgroup');
        this.nodeMouseOutHandler(d, elems[i]);
     });
});

---

对于

饼图

，

nodeMouseOverHandler

可以很好地启动，但是

nodeMouseOutHandler

根本不会启动。如果我渲染一个圆而不是饼图，一切都会非常好。知道我为什么不能观察到

mouseout

事件吗？

您没有将DOM元素（

this

）传递给您的函数。在这种情况下，问题更复杂。有没有可能成为一名医生？顺便说一句，

这个

在这些参数中是

元素[i]

。我想这可能是一个上下文问题，你的

鼠标输出

函数中的

这个

是什么？@slashburn等等，是否将

mouseout

侦听器设置为组和内部路径？@slashburn将侦听器删除为组，只将侦听器保留为路径，并告诉我是否看到console.log。