我正在关注这个例子: http://bl.ocks.org/ElefHead/ebff082d41ef8b9658059c408096f782
但是，我不明白为什么我只画了 3 个东西(县、州、州边界)。当一个状态悬停时，我只想更改填充颜色并让体验流畅。
jsfiddle 在这里: https://jsfiddle.net/kick_out/jq3w6xft/10/
当前代码具有与 bl.ocks 示例类似的 css 样式:当我删除县部分时，我没有突出显示。
.county-boundary:hover, .state:hover {
fill: orange
}
最佳答案
首先，状态的类是state，而不是states。但是这个问题不仅仅是一个打字错误的问题，这里还有一个更大的问题:
您将状态的填充设置为none(使用它们的父组 CSS)。这就是为什么你悬停没有效果。在 SVG 中，默认的 pointer-events 值为 visiblePainted，in which :
The element can only be the target of a pointer event when the visibility property is set to visible and e.g. when a mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none. (emphasis mine)
因此，您应该将它们的pointer-events设置为all。
此外，如果您想显示县，请更改附加顺序。
这是您的代码，其中包含这些更改:
async function drawMap() {
var svg = d3.select("body").append('svg')
.attr("height", 600)
.attr("width", 1000)
var map = await d3.json('https://d3js.org/us-10m.v1.json')
var path = d3.geoPath()
var mouseOver = function(d) {
d3.select(this)
}
var mouseOut = function(d) {}
svg.append("g")
.attr('id', 'counties')
.selectAll("path")
.data(topojson.feature(map, map.objects.counties).features)
.enter().append("path")
.attr("d", path)
.attr("class", "county-border")
svg.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(map, map.objects.states).features)
.enter().append("path")
.attr("d", path)
.attr('class', 'states')
svg.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(map, map.objects.states).features)
.enter().append("path")
.attr("d", path)
.attr("class", "state")
.attr("pointer-events", "all");
svg.append("g")
.attr("id", "counties")
.selectAll("path")
.data(topojson.feature(map, map.objects.counties).features)
.enter().append("path")
.attr("d", path)
.attr("class", "county-boundary")
.attr("pointer-events", "none")
}
drawMap()#states {
fill: none;
stroke: green;
stroke-width: 1.9px;
}
#states .active {
display: none;
}
#state-borders {
fill: none;
}
#counties {
fill: none;
}
.county-boundary {
fill: none;
stroke: lightgrey;
stroke-width: 0.7px;
}
.state:hover {
fill: orange;
}
#sliderContainer {
text-align: center;
position: relative;
left: 10px;
}<!DOCTYPE html>
<html lang="en">
<title>County Map</title>
<body>
<div id="wrap"></div>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="map.js"></script>
</body>
</html>关于javascript - 在 Choropleth 中突出显示状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58783312/