使用 Mike Bostock 的 bl.ock 将状态合并到单个多边形 https://bl.ocks.org/mbostock/5416440同时还尝试合并一些 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>
最佳答案
正确的 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>关于d3.js - 当鼠标悬停在 map 的合并 topojson 部分上时，CSS 悬停功能没有响应。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42190618/