Javascript 拖动功能不适用于启动单击的第一个选择_Javascript_D3.js

Javascript 拖动功能不适用于启动单击的第一个选择

javascript d3.js

Javascript 拖动功能不适用于启动单击的第一个选择,javascript,d3.js,Javascript,D3.js,以下代码旨在通过mousemove和mouseclick突出显示县。代码基本上是正确的，我唯一遇到的问题是当我点击并移动鼠标时，第一个选择没有突出显示并且被跳过。我可以返回并点击它来选择它，但它很烦人，它没有从一开始就选择它谢谢你的帮助 <!DOCTYPE html> <title>Heartland Remapping Tool</title> <link rel="shortcut icon" type="image/png" href="/fav

以下代码旨在通过mousemove和mouseclick突出显示县。代码基本上是正确的，我唯一遇到的问题是当我点击并移动鼠标时，第一个选择没有突出显示并且被跳过。我可以返回并点击它来选择它，但它很烦人，它没有从一开始就选择它

谢谢你的帮助

<!DOCTYPE html>
<title>Heartland Remapping Tool</title>
<link rel="shortcut icon" type="image/png" href="/faviconpng.png"/>
<style>
svg{
  width:100%;
  height: auto;
}
.counties, .unhovered {
  fill: white;
  stroke: #7887AB;
  stroke-width: .5px;
}
.counties .hovered, .counties :hover {
  fill: #061539;
  stroke-width: 0px;
}
.selected {
  fill: #061539;
}
.deselected {
  fill: white;
}
.deselected :hover {
  fill: white;
}
.county-borders {
  fill: none;
  stroke: #F0F8FF;
  stroke-width: .2px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
.state-borders {
  fill: none;
  stroke: #162955;
  opacity: .8;
  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 clickDown = true;
var numSelectedCounties = 0;
var selectedCounties = {};

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("g")
      .attr("class", "state-borders")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.nation).features)
      .enter()
      .append("path")
      .attr("d", path);
  svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.nation, function(a, b) { return a !== b; })));
  svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
  svg.append("path")
      .attr("class", "county-borders")
      .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; })));

//Clicking stuff below.

  let hoverEnabled = false;

  svg.selectAll('.counties path')
  .on('mousedown', x => hoverEnabled = true)
  .on('mouseup', x => hoverEnabled = false)
  .on('mouseover', function() {
    if (hoverEnabled) {
      if (!d3.select(this).classed('hovered')) {
        d3.select(this).classed('hovered', true);
        numSelectedCounties++;
      }
    }
  })
  .on('click', function() {
      if (d3.select(this).classed('hovered')) {
        d3.select(this).classed('hovered', false);
        numSelectedCounties--;
      }
      else {
        d3.select(this).classed('hovered', true);
        numSelectedCounties++;
      }
  })
  });
</script>

在mousedown中设置一个标志以查看是否正在拖动；然后鼠标悬停设置颜色。你刚用鼠标点击的县的鼠标悬停事件已经发生了，所以它不会设置颜色

我会将所有事件处理简化为：

let hoverEnabled = false;
svg.selectAll('.counties path')
  .on('mousedown', function(){
    var self = d3.select(this);
    hoverEnabled = !self.classed('hovered');
    self.classed('hovered', hoverEnabled);
  })
  .on('mouseup', function(){ hoverEnabled = false; })
  .on('mouseover', function() {
    if (hoverEnabled){
      d3.select(this).classed('hovered', true);
    }
  });

而且，我也不会费心去统计选定的县。当您需要它时，您可以通过以下方式轻松找到它：

d3.selectAll('.hovered').size();

运行代码：

心脏地带重映射工具 svg{ 宽度：100%；高度：自动； } .县，.未被发现{ 填充物：白色；行程：7887AB；笔划宽度：.5px； } .countries.悬停，.countries:悬停{ 填充：061539；笔划宽度：0px； } .选定{ 填充：061539； } .取消选择{ 填充物：白色； } .取消选择：悬停{ 填充物：白色； } .县边界{ 填充：无；行程：F0F8FF；笔划宽度：.2px；笔划线条连接：圆形；笔划线头：圆形；指针事件：无； } .国家边界{ 填充：无；中风：162955；不透明度：.8；笔划线条连接：圆形；笔划线头：圆形；指针事件：无； } var svg=d3.selectsvg； var path=d3.geoPath； var clickDown=true； var numselectedcountries=0； var selectedcountries={}； d3。jsonhttps://d3js.org/us-10m.v1.json，函数错误，美国{ 如果错误抛出错误； svg.appendg .班级、县 .选择所有路径 .datatopojson.featureus，us.objects.countries.features 进来 .appendpath .attrd，路径； svg.appendg .国家边界 .选择所有路径 .datatopojson.featureus，us.objects.nation.features 进来 .appendpath .attrd，路径； svg.appendpath .国家边界 .attrd，pathtoposon.meshus，us.objects.nation，function，b{返回a！==b；}； svg.appendpath .国家边界 .attrd，pathtoposon.meshus，us.objects.states，function，b{返回a！==b；}； svg.appendpath .国家级，县边界 .attrd，pathtoposon.meshus，us.objects.countries，function，b{返回a！==b；}；设hoverEnabled=false； svg.selectAll'.path' .on'mousedown'，函数{ var self=d3。选择此选项； hoverEnabled=！self.classed'hovered'； self.classed'hovered'，hoverEnabled； } .on'mouseup'，函数{hoverEnabled=false；} .on'mouseover'，函数{ 如果已启用悬停{ d3.选择this.classed'hovered'，true； } }; };

点击鼠标移动被称为dragGreat！谢谢你的帮助，马克。这很有效。