在 svg 中捕获重叠 g 元素中的指针事件

Question

我正在向同一个 SVG 添加 2 个 g 元素，例如

var charts = svg1.append("g")
                .attr("class","charts")
                .attr("id","charts")
                .style("opacity",0);
var bubbles = svg1.append("g")
                .attr("id","bubble");  

var bubbleId = document.getElementById( 'bubble' );
var backId = document.getElementById( 'back' );
var chartId = document.getElementById( 'charts' );
bubbleId.addEventListener( 'click', chartSVG );
backId.addEventListener( 'click', bubbleSVG );


function bubbleSVG(){
    bubbleId.style.opacity = 1;
    chartId.style.opacity = 0;
    bubbleId.style.z_index = 100;
    chartId.style.z_index = 10;            
}

function chartSVG(){
    bubbleId.style.opacity = 0;
    chartId.style.opacity = 1;
    bubbleId.style.z_index = 10;
    chartId.style.z_index = 100;  

}

我将它们放置在彼此重叠的位置，并使用另一个 div 元素 (backId)

在它们的不透明度 (bubbleId,chartId) 之间切换

气泡和图表 svg 分别有气泡和圆形布局。

我现在有以下问题..

如果我在 chartId 上执行鼠标悬停事件捕获，对于与气泡重叠的圆圈，事件不会在具有更高 z-index 的页面上捕获，而是始终在 bubbleId 上捕获事件。 ...

任何指针。

Answer 1

z-index 在 svg 中不起作用。

一个选项是使用 pointer-events none 禁用组读取上的鼠标事件 here

 function bubbleSVG(){
        bubbleId.style.opacity = 1;
        chartId.style.opacity = 0;
        d3.select(bubbleId).style("pointer-events", "auto");
        d3.select(chartId).style("pointer-events", "none");
    }

function chartSVG(){
    bubbleId.style.opacity = 0;
    chartId.style.opacity = 1;
    d3.select(bubbleId).style("pointer-events", "none");
    d3.select(chartId).style("pointer-events", "auto");
;
}

Answer 2

点击对象（圆形和矩形）试试这个

var width = 400, height = 300;
function bubbleSVG(){
    bubbleId.style.display = 'unset'; 
    chartId.style.display = 'none';
    }

function chartSVG(){
    chartId.style.display = 'unset'; 
    bubbleId.style.display = 'none'; 

}
function toggleSVG(){
if(bubbleId.style.display == 'none'){
 bubbleSVG()
}else{chartSVG()}
}
var svg1 = d3.select("body")
 .append("svg")
 .attr("width", width)
 .attr("height", height);

var back = svg1.append("g")
                .attr("id","back")
                .append("rect")
                .attr("x","0") 
                .attr("y","0")
                .attr("width",width)
                .attr("height",height)
                .attr("fill","yellow");  
var charts = svg1.append("g")
                .attr("class","charts")
                .attr("id","charts")
                .style("opacity",1)
                .append("rect")
                .attr("x","50") 
                .attr("y","50")
                .attr("width","50")
                .attr("height","10")
                .attr("stroke","black")
                .attr("stroke-width","3")
                .attr("fill","blue");
var bubbles = svg1.append("g")
                .attr("id","bubble")
                .append("circle")
                .attr("cx","50") 
                .attr("cy","50")
                .attr("r","40")
                .attr("stroke","black")
                .attr("stroke-width","3")
                .attr("fill","red");  

var bubbleId = document.getElementById( 'bubble' );
var backId = document.getElementById( 'back' );
var chartId = document.getElementById( 'charts' );
bubbleId.addEventListener( 'click', chartSVG );
chartId.addEventListener( 'click', bubbleSVG );
backId.addEventListener( 'click', toggleSVG );


bubbleSVG();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

在 svg 中捕获重叠 g 元素中的指针事件

capturing pointer events in overlapping g-elements in a svg

javascript

events

svg

mouseover

d3.js