當我將鼠標懸停在圓形而不是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頁面上查看源代碼。

希望這可以幫助。