当我悬停在圆圈而不是 Voronoi 单元格上时如何显示 paths/lines?

How to display paths/lines when I'm hovering circles instead of Voronoi cells?

我正在寻找解决方案。我从这个例子开始: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(因为我不想使用细胞,也许你知道另一种更可行的方法......)。

我的最终目标是找到这个答案,然后显示 is/are 仅与悬停的圆圈有关的路径。与 Voronoi 相比,我需要更高的精度,但一开始它看起来不错,对于路径,即)。

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

谢谢!

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

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

相关代码改动:

  1. 向包含圆弧

    <g>添加了class
    .enter().append("svg:g").attr('class', function(d) { return d.iata; });
    
  2. 更改圆圈的鼠标悬停和鼠标移开事件以显示圆弧基于在第一步中添加的class。

    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 页面上的源代码。

希望对您有所帮助。