d3js v5 + topojson v3 Access to the object's properties in the background

Question

I'm looking for a tip to access to the object's properties in the background. Indeed, with a mousehover, I want to reveal the properties of layer ze.json (the geographical unit).

However, my proportionnal circles hide this layer.

I have not really idea of the procedure envisaged because :

• Circle proportional must be on the top
• Opacity doesn't solve the problem

Maybe I should report the information on proportional circles. But how could I transfer this information ? (not only the population but also the ZE name )

Proportionnal Circles

let rMax = d3.max(featureCollectionZe.features,(d)=>{return d.properties.pop;});

let propCircle = g.attr("class","prop_circle")
    .selectAll(".prop_circle")
    .data(featureCollectionZe.features)
    .enter()
    .append("circle")
    .attr("transform", (d)=>{return "translate(" + path.centroid(d) + ")";})
    .attr("r",(d)=>{return(Math.sqrt(d.properties.pop/rMax))*30;})
    .attr("fill","#ffa500")
    .attr("fill-opacity",0.8)
    .attr("stroke-width",1)

Mouse event

svgZe
    .on("mouseover",
        (e)=>{return document.getElementById("name").innerHTML=e.properties.nom_ze,
        document.getElementById("pop").innerHTML=e.properties.pop;}
    )
    .on("mouseout",
        (e)=>{return document.getElementById("name").innerHTML="&nbsp",
        document.getElementById("pop").innerHTML="&nbsp";}
    )

Here is my code : https://plnkr.co/edit/ZzeHWfChXa348iNBcHWQ

Answer 1

我不确定这是否可以完全解决您的问题，但是您是否尝试过将pointer-events: none应用于圈子pointer-events: none CSS属性？