logo标签列表

d3js重叠元素：如何将点击事件“传递”给“下方”的元素？

javascriptd3.js
3
使用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)

显然，当第二个元素重叠在第一个元素上方时，它将阻止鼠标事件。我想通过第二个对象透明地绕过点击、双击和右键单击事件。我该如何做到这一点？

1个回答
9
最简单的方法是将对象设置为不接收任何指针事件：
svg.append("rect").attr("pointer-events", "none");
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接