javascript - 将路径移到前面会更改选择吗?

标签 javascript d3.js

我正在努力理解以下行为:我有两个 map (基于 topojson-data,通过 d3 可视化),并且将鼠标悬停在 map1 的某些部分上时,map2 的相应部分应该亮起。我让它可以更改样式(不透明度或填充),但现在我想突出显示每个 map 部分的边界。

例如here需要将特定路径移到前面以使所有边框可见。对于我将鼠标移动到的区域(使用此功能)来说,这没有问题,但是当我选择另一张 map 的相应部分时,它会工作一次,然后选择其他部分 - 所以我的猜测是有些东西弄乱了选择。

这是代码:

.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

鼠标移开时,它只会重置:

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

当我将数据记录到控制台时,似乎每次鼠标悬停都会在数据集中移动 +1 个条目,从鼠标移过的第一个条目开始。我不明白为什么会发生这种情况以及如何避免它。

我很感激您能给我的任何想法,主要是我想了解出了什么问题以及原因。

谢谢

最佳答案

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

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

抱歉打扰了,我之前没有看到这种可能性。

关于javascript - 将路径移到前面会更改选择吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30277374/

相关文章:

javascript - jQuery 1.7.2 AJAX 调用抛出 NS_ERROR_XPC_NOT_ENOUGH_ARGS 错误

javascript - 在 GWT 中按属性获取 DOM 元素?

javascript - 试图通过使用 d3 或任何其他方式找到一种在 html/js 中获取 csv 的行名和列名的方法?

javascript - 内容扩展时图像错位

javascript - 如何在 Laravel 中合并两个图像

json - d3js json饼图

javascript - 工具提示 d3js 面积图中的 roi 值

javascript - 在折线图中的多条线上绘制点

javascript - 使用默认墨卡托投影比例的 D3 初始缩放

javascript - angular 是否具有 vue.js 中的 "computed property"功能?