d3.js topojson 县/州地图上的鼠标移动功能 - 按住单击以选择多个县答案

【问题标题】：Mousemove function on a d3.js topojson county/state map - Hold click to select multiple countiesd3.js topojson 县/州地图上的鼠标移动功能 - 按住单击以选择多个县
【发布时间】：2017-03-22 15:19:04
【问题描述】：

利用 Mike Bostocks 美国县 bl.ock：https://bl.ocks.org/mbostock/4122298。

目标是创建一个 mousemove 函数，该函数在 mousemove 事件期间将突出显示所有选定的县。当前示例仅使用:hover 突出显示并且不保留选择。

<!DOCTYPE html>
<style>

.counties :hover {
  fill: red;
}

.county-borders {
  fill: none;
  stroke: #fff;
  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();

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

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

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

</script>

【问题讨论】：

所以你希望你悬停的所有国家都保持红色，对吗？鼠标痕迹？
@undko 是的，没错。我以前没有听说过这个词，但这本质上是目标。只要按下鼠标，它就会跟踪鼠标的移动。
我应该把“鼠标痕迹”放在引号中，因为这是我个人的说法（甚至不是母语人士:-)

标签： javascript d3.js topojson

【解决方案1】：

看我的 sn-p - 这就是我所理解的。您需要使用 JavaScript 事件和类，因为 CSS 无法更改状态。

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

var path = d3.geoPath();

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

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

  // the following block is new, adding JS events
  let hoverEnabled = false;
  svg.on('mousedown', x => hoverEnabled = true)
    .on('mouseup', x => hoverEnabled = false)
  svg.selectAll('.counties path').on('mouseover', function() {
    if (hoverEnabled) {
      this.classList.add('hovered');
    }
  });
  
  svg.append("path")
     .attr("class", "county-borders")
    .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; })));
});

/* paths with class "hovered" need to be selected here, too */
.counties .hovered, .counties :hover {
  fill: red;
}

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

<!DOCTYPE html>
<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>

【讨论】：

这很好用。比我一直磕磕绊绊的要好。谢谢你的帮助！我希望我自己可以编写代码以在“未点击”时删除颜色。谢谢！
所以我又回来了。在不告诉我答案的情况下，您提供的代码是否可以轻松实现单击已单击县并基本上“取消单击”它的想法？
欢迎回来！我看到“取消点击”县的三种可能性：1.如果您的mousedown 事件的目标县之前有类hovered，那么在您释放之前从任何县中删除该类鼠标按钮，否则添加该类（再次添加到所有县）。 2. 不要介意第一个县，只需在途中反转/切换所有县3. 删除 mousedown 并更改现有行为，以便所有县都需要点击随时切换。所有这三种可能性都是可行的，无需进行重大代码更改。
我知道这个问题很老，但我需要这个信息，但也想了解发生了什么。如果您添加的 sn-p 在 d3.json 函数调用内部而不是外部，您能解释一下为什么它可以工作吗？还要评论为什么你需要一个全选？也许只是解释每个 selectAll 语句正在选择什么？是所有县，还是组成一个县的所有线？