javascript - d3js 重叠元素 : how to "pass through" clicks to "lower" element?

Question

使用 d3js，我在一个元素之后/之上绘制了一些元素。如:

 // draw rectangle from dataset "d"
 svg.selectAll(".rect").append("rect")
            .attr("y", 10)
            .attr("x", 10)
            .attr("height", 5)
            .attr("width", 5)
            .on("click", function (d, i) {  
        // react on clicking
     });

  // slightly bigger frame overlapping first one
  var c=1.02;
  svg.append("rect")
                .attr("x", 10)
                .attr("y", 10)
                .attr("width", 5 * c)
                .attr("height", 5 * c)
                .attr("stroke", "blue")
                .attr("stroke-width", 1)
                .attr("fill-opacity", 0)

很明显，当第二个元素与第一个元素重叠时，它会阻塞鼠标事件。我想通过第二个对象透明地绕过点击、双击和右键点击。我该怎么做？

Answer 1

最简单的方法是将对象设置为不接收指针事件:

svg.append("rect").attr("pointer-events", "none");