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属性应用于圈子？