d3js重叠元素：如何“点击”点击“下”元素？

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");