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

Question

嗨，我几乎用d3js完成了一个地图，但遇到了一个奇怪的问题：一些文本元素隐藏在相邻状态下面。我尝试将文本的z-index设置为高于州的mouseover。这是否与在文本之前创建弧有关？如果是这样，我的双手被绑，因为我使用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() }) 事件来显示文本。请注意，我很想知道为什么文本会以这种方式显示。

我已在Plunkr中包含完整代码：http://plnkr.co/edit/lYPWOHPACjpEq7MymII2?p=preview 将鼠标移交给印第安纳州和伊利诺伊州时，您可以看到问题

这里是创建状态边界和使用鼠标悬停事件添加文本的代码：

$id = DB::table('users')->InsertGetId(
      ['status' => 0]
    );              
        if($status && $id)
        {   
           DB::table('users')
           ->select max("id")
           ->update(['status' => 1]);
        }

Answer 1

您正在使用SVG创建地图。在SVG（没有z-index）中，绘制顺序是定义顶部和底部的最重要的东西。

话虽如此，这是你的问题：每个文本都附加在<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")

这是您更新的plunker：http://plnkr.co/edit/EFwnO7BCHKeXvjtsIWeL?p=preview