D3.js CSS悬停功能在地图的合并区域上悬停时不响应。_D3.js_Topojson

D3.js CSS悬停功能在地图的合并区域上悬停时不响应。

d3.js

D3.js CSS悬停功能在地图的合并区域上悬停时不响应。,d3.js,topojson,D3.js,Topojson,使用Mike Bostock的bl.ock将状态合并为单个多边形，同时尝试合并一些CSS悬停，突出显示整个合并部分未合并的状态会很好地悬停，但合并的部分不会响应CSS悬停。希望得到一个解释，解释为什么它忽视了它 <!DOCTYPE html> <style> .states { fill: white; stroke: #000; stroke-width: 0.5px; } .states :hover { fill: grey; } .east

使用Mike Bostock的bl.ock将状态合并为单个多边形，同时尝试合并一些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>


.州{
填充物：白色；
行程：#000；
笔划宽度：0.5px；
}
.国家：悬停{
填充物：灰色；
}
.东部{
填充物：橙色；
}
.东方：悬停{
填充物：白色；
}
韦斯特先生{
填充：蓝色；
}
.韦斯特：悬停{
填充物：白色；
}
.国家边界{
填充：无；
行程：#000；
笔划宽度：0.5px；
笔划线条连接：圆形；
笔划线头：圆形；
指针事件：无；
}
var svg=d3.选择（“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，函数（错误，美国）{
如果（错误）抛出错误；
svg.append（“g”）
.attr（“类别”、“状态”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.states）.features）
.输入（）
.append（“路径”）
.attr（“d”，路径）；
追加（“路径”）
.attr（“类”、“东”）
.datum（topojson.merge（us，us.objects.states.geometries.filter（函数（d）{return d.id in east；}）））
.attr（“d”，路径）；
追加（“路径”）
.attr（“类”、“西”）
.datum（topojson.merge（us，us.objects.states.geometries.filter（函数（d）{return d.id in west；}）））
.attr（“d”，路径）；
追加（“路径”）
.attr（“类别”、“国家边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.states，函数（a，b）{返回a！==b；}））；
});

正确的CSS应该是：

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

谢谢你，马克！我不知道是什么绊倒了我，但你的代码工作得很好。是时候比较之前/之后和学习了。再次感谢你。