我正在寻找解决方案。我从以下示例开始: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相比,我需要更高的精度,但是乍一看对于路径(即路径)来说似乎不错。
我可以添加更多代码,但在全局上,它与上面的示例相同
谢谢!
答案 0 :(得分:0)
这是您最终目标的解决方案-显示与悬停的圈子相关的路径
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页面上查看源代码。
希望这会有所帮助。