Question

我正在努力理解以下行为：我有两个地图（基于topojson数据，通过d3可视化），并且鼠标悬停在map1的某些部分上，map2的相应部分应该亮起。我让它改变风格（不透明度或填充），但现在我想突出显示每个地图部分的边框。

如例如here所示，需要将特定路径移动到前面以使所有边框可见。对于我移动鼠标的区域（使用此），这没有问题，但是当我选择其他地图的相应部分时，它会工作一次，然后其他部分被选中 - 所以我的猜测是有些混乱选择。

这是代码：

.on("mouseover",function(d){
var old=d.properties.iso;  //this is the identifying number of the map-part(s)

sel=svg2.selectAll("path")
  .data(datastore2015.features)
  .filter(function(d){return d.properties.iso==old;})
  .node();  //here the corresponding part(s) get filtered

d3.select(sel.parentNode.appendChild(sel)).classed("high2",true);  //and this moves it to front and highlights the borders

在mouseout上，它只是重置：

.on("mouseout",function(d){
svg2.selectAll("path").classed("high2",false);

当我将数据记录到控制台时，似乎每个鼠标悬停都会通过数据集移动+1条目，从鼠标移过的第一个条目开始。我无法弄清楚为什么会发生这种情况以及如何避免它。

我很感激你能给我的任何想法，主要是我想了解出了什么问题以及为什么。

感谢

Answer 1

所以我发现了我的错误，再次调用数据变量似乎搞砸了事情 - 不知怎的，我觉得我需要它，但它的工作方式很好：

sel=svg2.selectAll("path").filter(function(d){return d.properties.iso==old;}).node();
d3.select(sel.parentNode.appendChild(sel)).classed("high2",true);

抱歉，我以前没有看到过这种可能性。

移动路径到前面改变选择？

1 个答案: