我在D3中构建了一个图表，其中节点可以有多种颜色（例如，节点的120°为蓝色，另一个120°切片为绿色，剩余的SVG circle为黄色）。
因此，节点基本上不再是pie chart元素，而是基于path元素的pie chart's。
出于交互性原因，如果用户将鼠标悬停在其上，我会增加mouseout半径。为了缩小它，我想听一下mouseout事件。我的问题是我的事件监听器不会在mouseover上触发。但它确实触发了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)
：
circle如果我只想显示一种颜色，我会渲染pie chart。如果我想显示多于1种颜色，我会渲染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]);
});
});
pie chart对于nodeMouseOverHandler，nodeMouseOutHandler发射完全正常，但mouseout根本不会发射。如果我渲染一个圆而不是饼图，一切都很好。有什么想法我无法观察{{1}}事件？