다음 코드는 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당신은 당신이 끌고 있는지 확인하기 위해 플래그를 설정; 그런 다음 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다