Question

我正在寻找解决方案。我从以下示例开始：http://mbostock.github.io/d3/talk/20111116/airports.html

在这里，您可以将鼠标悬停在地图上，并查看同时显示的线条。

但是，即使您不在圆圈上，也会出现线条。

我实际上是在寻找一种解决方案，其中仅当您将鼠标悬停在一个圆圈上时才显示线（或路径）？

这就是为什么我编写这段代码的原因：

var c = circles.selectAll("circle")
        .data(airports)
        .enter().append("svg:circle")
        .attr("cx", function(d, i) { return positions[i][0]; })
        .attr("cy", function(d, i) { return positions[i][1]; })
        .attr("r", function(d) { return d.r })
        .style("fill", function(d){ return d.color})
        .sort(function(a, b) { return countByAirport[b.iata] - countByAirport[a.iata]; });

         c.on("mouseover", function(e){
           g.select("path.arc")
            .style("display", "inherit")
           });
        });
        c.on("mouseout", function(e){
           g.select("path.arc")
            .style("display", "none");
        });

我可能离实现此目标的好方法还很远。在这里，使用我的代码，当我将鼠标悬停在每个圆圈上时，可以显示所有路径。我也有其他解决方案，我可以离开Voronoi（因为我不想使用细胞，也许您知道另一种更可行的方法...）。

我的最终目标是找到这个答案，然后显示仅与悬停的圆圈有关的路径。与Voronoi相比，我需要更高的精度，但是乍一看对于路径（即路径）来说似乎不错。

我可以添加更多代码，但在全局上，它与上面的示例相同

谢谢！

Answer 1

这是您最终目标的解决方案-显示与悬停的圈子相关的路径

https://shashank2104.github.io/d3-Voronoi/

相关代码更改：

为包含弧的<g>添加了一个类

.enter().append("svg:g").attr('class', function(d) { return d.iata; });

更改了圆的鼠标悬停和鼠标移出事件，以基于第一步中添加的类显示弧。

circles.on("mouseover", function(d){
    console.log(d.iata);
   cells.select('g.'+d.iata).selectAll("path.arc")
    .style("display", "inherit")
}).on("mouseout", function(d){
   cells.select('g.'+d.iata).selectAll("path.arc")
        .style("display", "none");
});

取消显示所有弧的CSS：

#cells g:hover path.arc {
  display: inherit;
}

我可以添加更多代码，但我猜您可以在github页面上查看源代码。

希望这会有所帮助。

当我将鼠标悬停在圆形而不是Voronoi单元格上时，如何显示路径/线？

1 个答案: