Question

我将2个g元素添加到同一个SVG中，如

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）之间切换

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

我现在有以下问题..

如果我在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元素中的指针事件

2 个答案: