d3js v5 + topojson v3 后台获取对象的属性

Question

我正在寻找在后台访问对象属性的技巧。实际上，通过鼠标悬停，我想显示图层 ze.json（地理单位）的属性。

但是，我的比例圆圈隐藏了这一层。

我不太了解设想的程序，因为：

圆比例必须在顶部
不透明度不能解决问题

也许我应该报告有关比例圆的信息。但是我怎么能传送这些信息呢？（不仅是人口还有ZE名字）

比例圆

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)

鼠标事件

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

这是我的代码：https://plnkr.co/edit/ZzeHWfChXa348iNBcHWQ

Answer 1

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

d3js v5 + topojson v3 后台获取对象的属性

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

javascript

d3.js

topojson