javascript - 为什么我的 D3 map 中的文本隐藏在状态后面？

Question

嗨，我几乎已经使用 d3js 完成了一张 map ，但遇到了一个奇怪的问题:一些文本元素隐藏在相邻状态下方。我尝试将文本的 z-index 设置为高于各州的 z-index。这与在文本之前创建弧线有关吗？如果是这样，我的手就被绑住了，因为我正在使用 mouseover 事件来显示文本。请指教，我很想知道为什么文本会这样显示。

我已经在 Plunkr 上包含了完整的代码:http://plnkr.co/edit/lYPWOHPACjpEq7MymII2?p=preview将鼠标悬停在印第安纳州和伊利诺伊州时您可以看到问题

以下是创建状态边界并使用鼠标悬停事件添加文本的代码:

var g = svg.selectAll("path")
    .data(us.features)
    .enter()
    .append("g")

var allState = g.append("path")
    .attr("d", path)
    .attr("class", "state-boundary")
    .style("fill",function(d){console.log(d.properties.pdi);return "rgb("+ rad(d.properties.pdi) + ",0,0)"});

g.on("mouseover",function(){
    d3.select(this).append("text")
      .attr("class","states")
      .text(function(d){return d.properties.NAME})
      .attr("x",function(d){return path.centroid(d)[0]})
      .attr("y",function(d){return path.centroid(d)[1]})
      })
g.on("mouseout",function(){
    d3.select(".states")
    .remove()
})

Answer 1

您正在使用 SVG 来创建 map 。在 SVG(没有 z 索引)中，绘制顺序是定义顶部和底部的最重要因素。

话虽这么说，这是你的问题:每个文本都被附加到 <g> 上。元素，但有一些<g>之前画过。像这样:

<g>
    <path "Illinois path here"></path>
</g>
<g>
    <path "Indiana path here"></path>
</g>

然后，当您将鼠标悬停在伊利诺伊州时:

<g>
    <path "Illinois path here"></path>
    <text "Illinois text here"></path>
</g>
<g>
    <path "Indiana path here"></path><!--Indiana path over Illinois text!-->
</g>

因此，解决方案非常简单:只需 raise小组:

d3.select(this).raise().append("text")

这是您更新后的插件:http://plnkr.co/edit/EFwnO7BCHKeXvjtsIWeL?p=preview