D3.js d3能否将鼠标悬停事件传递给下面的层？_D3.js

D3.js d3能否将鼠标悬停事件传递给下面的层？

d3.js

D3.js d3能否将鼠标悬停事件传递给下面的层？,d3.js,D3.js,我试图理解一些事情：我有两个矩形在彼此的上面。底部矩形正在侦听“mouseover”事件。这个矩形的一半被另一个矩形覆盖将鼠标移动到触发鼠标悬停事件的第一个矩形上。将鼠标移动到顶部的第二个矩形上，不会触发鼠标悬停事件有没有办法“告诉”第二个矩形将鼠标悬停事件“传递”到底部的第一个矩形上以下是我的例子： <!DOCTYPE html> <meta charset="utf-8"> <body> </body> <!-- Load

我试图理解一些事情：

我有两个矩形在彼此的上面。底部矩形正在侦听“mouseover”事件。这个矩形的一半被另一个矩形覆盖

将鼠标移动到触发鼠标悬停事件的第一个矩形上。将鼠标移动到顶部的第二个矩形上，不会触发鼠标悬停事件

有没有办法“告诉”第二个矩形将鼠标悬停事件“传递”到底部的第一个矩形上

以下是我的例子：

<!DOCTYPE html>
<meta charset="utf-8">


<body>
</body>

<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

    // 2. Use the margin convention practice
    var margin = {top: 50, right: 50, bottom: 50, left: 50}
        , width = window.innerWidth - margin.left - margin.right // Use the window's width
        , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height


    // 1. Add the SVG to the page and employ #2
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    // first rectangle with mouse event listener 
    const first_layer = svg.append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height).attr('fill', '#ff0000').on('mouseover', () => {
        console.log(d3.event.x)
    });

    // second rectangle covering half of the first rectangle, blocking the mouse event
    const second_layer = svg.append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height / 2).attr('fill', '#0000ff');
</script>

如果我们不对任何鼠标相关事件使用第二层，我们可以将其指针事件属性设置为“无”。这将防止它对任何指针事件作出反应。只需将样式“pointer-events”、“none”链接到第二层即可

 const second_layer = svg.append('rect').attr('x', 0).attr('y', 0).attr('width', width).style('pointer-events', 'none')......;

谢谢你，那真是一种享受。正是我需要的！