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