クリックが開始された最初の選択にドラッグ機能が適用されない

次のコードは、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>

出典

2017-03-26 Matthew Snell

クリックしてのMouseMoveをドラッグ – mehulmpt

mousedownでは、ドラッグしているかどうかを確認するフラグを設定します。 mouseoverが色を設定します。まあ、あなたがちょうどマウスダウンした郡のmouseoverイベントが既に発生しているので、色を設定しません。

私が扱うすべてのイベントを簡素化したい：また

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();

：

<!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; }))); 
 

 
    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); 
 
    } 
 
    }); 
 
}); 
 

 
</script>

出典

2017-03-27 00:40:05 Mark

グレートと呼ばれているあなたがそれを必要とするときそれはちょうどそれを把握するクリーナーです！助けてくれてありがとう、Mark。これはうまくいった。 –

クリックが開始された最初の選択にドラッグ機能が適用されない

答えて

関連する問題