当鼠标悬停在地图的合并的topojson部分上时，CSS悬停功能没有响应。

使用Mike Bostock的bl.ock将状态合并为单个多边形https://bl.ocks.org/mbostock/5416440，同时还尝试合并一些CSS悬停，以突出显示整个合并部分。当鼠标悬停在地图的合并的topojson部分上时，CSS悬停功能没有响应。

没有合并的状态悬停就好了，但合并的部分不响应CSS悬停。希望解释为什么它忽略它。

<!DOCTYPE html> 
<style> 

.states { 
    fill: white; 
    stroke: #000; 
    stroke-width: 0.5px; 
} 

.states :hover { 
    fill: grey; 
} 

.east { 
    fill: orange; 
} 

.east :hover { 
    fill: white; 
} 

.west { 
    fill: blue; 
} 

.west :hover { 
    fill: white; 
} 

.state-borders { 
    fill: none; 
    stroke: #000; 
    stroke-width: 0.5px; 
    stroke-linejoin: round; 
    stroke-linecap: round; 
    pointer-events: none; 
} 

</style> 
<svg width="960" height="600"></svg> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://d3js.org/topojson.v2.min.js"></script> 
<script> 

var svg = d3.select("svg"); 

var path = d3.geoPath(); 

var east = { 
    "26": 1, "29": 1, "37": 1, "31": 1, "33": 1, 
    "34": 1, "36": 1, "39": 1, "42": 1, "44": 1, "45": 1, "47": 1, "51": 1, 
    "50": 1, "55": 1, "54": 1 
}; 

var west = { 
    "9": 1, "10": 1, "12": 1, "13": 1, "19": 1, "17": 1, "18": 1, "21": 1, 
    "25": 1, "24": 1, "23": 1 
}; 

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) { 
    if (error) throw error; 

    svg.append("g") 
     .attr("class", "states") 
     .selectAll("path") 
     .data(topojson.feature(us, us.objects.states).features) 
     .enter() 
     .append("path") 
     .attr("d", path); 

    svg.append("path") 
     .attr("class", "east") 
     .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return d.id in east; }))) 
     .attr("d", path); 

    svg.append("path") 
     .attr("class", "west") 
     .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return d.id in west; }))) 
     .attr("d", path); 

    svg.append("path") 
     .attr("class", "state-borders") 
     .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))); 

}); 

</script>

来源

2017-02-12 Matthew Snell

正确的CSS应该是：

.east:hover { //<-- note no spaces! 
    fill: white; 
}

我不知道它是如何工作的状态。您会注意到，如果您将其更改为适当的格式，则它会一次适用于所有“其他”状态（它将填充整个g）。一些如何破坏悬停语法与父母g继承正在做你想做的！

下面是正确的代码，我觉得你真的是后：

<!DOCTYPE html> 
 
<style> 
 
    .state { 
 
    fill: white; 
 
    stroke: #000; 
 
    stroke-width: 0.5px; 
 
    } 
 
    
 
    .state:hover { 
 
    fill: grey; 
 
    } 
 
    
 
    .east { 
 
    fill: orange; 
 
    } 
 
    
 
    .east:hover { 
 
    fill: white; 
 
    } 
 
    
 
    .west { 
 
    fill: blue; 
 
    } 
 
    
 
    .west:hover { 
 
    fill: white; 
 
    } 
 
    
 
    .state-borders { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-width: 0.5px; 
 
    stroke-linejoin: round; 
 
    stroke-linecap: round; 
 
    pointer-events: none; 
 
    } 
 
</style> 
 
<svg width="960" height="600"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script src="https://d3js.org/topojson.v2.min.js"></script> 
 
<script> 
 
    var svg = d3.select("svg"); 
 

 
    var path = d3.geoPath(); 
 

 
    var east = { 
 
    "26": 1, 
 
    "29": 1, 
 
    "37": 1, 
 
    "31": 1, 
 
    "33": 1, 
 
    "34": 1, 
 
    "36": 1, 
 
    "39": 1, 
 
    "42": 1, 
 
    "44": 1, 
 
    "45": 1, 
 
    "47": 1, 
 
    "51": 1, 
 
    "50": 1, 
 
    "55": 1, 
 
    "54": 1 
 
    }; 
 

 
    var west = { 
 
    "9": 1, 
 
    "10": 1, 
 
    "12": 1, 
 
    "13": 1, 
 
    "19": 1, 
 
    "17": 1, 
 
    "18": 1, 
 
    "21": 1, 
 
    "25": 1, 
 
    "24": 1, 
 
    "23": 1 
 
    }; 
 

 
    d3.json("https://d3js.org/us-10m.v1.json", function(error, us) { 
 
    if (error) throw error; 
 

 
    svg.append("g") 
 
     .selectAll("path") 
 
     .data(topojson.feature(us, us.objects.states).features) 
 
     .enter() 
 
     .append("path") 
 
     .attr("class", "state") 
 
     .attr("d", path); 
 

 
    svg.append("path") 
 
     .attr("class", "east") 
 
     .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { 
 
     return d.id in east; 
 
     }))) 
 
     .attr("d", path); 
 

 
    svg.append("path") 
 
     .attr("class", "west") 
 
     .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { 
 
     return d.id in west; 
 
     }))) 
 
     .attr("d", path); 
 

 
    svg.append("path") 
 
     .attr("class", "state-borders") 
 
     .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { 
 
     return a !== b; 
 
     }))); 
 

 
    }); 
 
</script>

来源

2017-02-12 23:12:38 Mark

谢谢，马克！我不知道什么让我失望，但你的代码运行得很好。时间来比较前/后和学习。再次感谢你。 –

当鼠标悬停在地图的合并的topojson部分上时，CSS悬停功能没有响应。

回答

相关问题