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

时间:2018-08-02 13:50:48

标签: javascript d3.js voronoi

我正在寻找解决方案。我从以下示例开始: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相比,我需要更高的精度,但是乍一看对于路径(即路径)来说似乎不错。

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

谢谢!

1 个答案:

答案 0 :(得分:0)

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

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

相关代码更改:

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

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

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

希望这会有所帮助。