在 Choropleth 中突出显示状态答案

【问题标题】：Highlight State in Choropleth在 Choropleth 中突出显示状态
【发布时间】：2019-11-09 20:42:19
【问题描述】：

我正在关注这个例子： 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
}

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

首先，州的班级是state，而不是states。但是这个问题不仅仅是一个错字的问题，这里还有一个更大的问题：

您将州的填充设置为none（使用它们的父组 CSS）。这就是为什么你悬停没有效果。在 SVG 中，默认的 pointer-events 值为 visiblePainted、in which：

当可见性属性设置为可见时，元素只能是指针事件的目标，例如当鼠标光标位于元素的内部（即“填充”）上并且填充属性设置为非无值时。（强调我的）

因此，您应该将他们的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>

【讨论】：

谢谢。州/州不是错字。我理解“类”声明，但我仍在为 .attr('id','states') 以及它如何影响输出以及为什么它在那里而苦苦挣扎。指针事件缺乏知识，所以我很欣赏这一课。