当我悬停圆圈而不是 Voronoi 单元格时如何显示路径/线条？

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/

相关代码更改：

1. 向包含圆弧的<g>添加了一个类

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

2. 更改了圆的mouseover和mouseout事件，以显示第一步中添加的类上基于的弧线。

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

3. 去掉了显示所有弧线的CSS：

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

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

希望这能有所帮助。