フランスに transform: scaleX(-1) scaleX(0.9) rotate(315deg) scaleX(0.9);
をつ適用すると群馬になる?
こちらのツイートから着想をお借りして作りました。 https://twitter.com/n74148970/status/1147807971436404737
license: mit |
フランスに transform: scaleX(-1) scaleX(0.9) rotate(315deg) scaleX(0.9);
をつ適用すると群馬になる?
こちらのツイートから着想をお借りして作りました。 https://twitter.com/n74148970/status/1147807971436404737
<!DOCTYPE html> | |
<html lang="jp"> | |
<head> | |
<script src="https://unpkg.com/d3@5.0.0/dist/d3.min.js"></script> | |
<style> | |
html,body{ | |
width: 100%; | |
height: 100%; | |
} | |
.map { | |
display: inline-block; | |
width: 470px; | |
height: 500px; | |
transition: all 2000ms 0s ease; | |
} | |
.change { | |
transform: scaleX(-1) scaleX(0.9) rotate(315deg) scaleX(0.9); | |
} | |
#btn { | |
z-index:9; | |
color:red; | |
position: absolute; | |
left:calc(980px/2 - 30px); | |
top:calc(250px - 21px); | |
font-size: 1em; | |
display: inline-block; | |
width: 60px; | |
height: 42px; | |
text-decoration: none; | |
background-color: #fff; | |
border-bottom: solid 4px #627295; | |
border-radius: 3px; | |
outline: none; | |
} | |
#btn:active { | |
-webkit-transform: translateY(4px); | |
transform: translateY(4px); | |
border-bottom: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<button id="btn">click!</button> | |
</div> | |
<div> | |
<svg class="map" id="gunma"></svg> | |
<svg class="map" id="france"></svg> | |
</div> | |
<script> | |
const gunma = d3.select("#gunma") | |
const france = d3.select("#france") | |
const w=470,h=500; | |
const Toggle = function(){ | |
var fn = arguments; | |
var l = arguments.length; | |
var i = 0; | |
return function () { | |
if (l <= i) i = 0; | |
fn[i++](); | |
} | |
} | |
const projection = d3.geoMercator(); | |
const geoPath = d3.geoPath(); | |
const p1 = d3.json("gunma.geojson"); | |
const p2 = d3.json("france.geojson"); | |
Promise.all([p1, p2]).then(function(data){ | |
const gunmaData = data[0]; | |
const flanceData= data[1]; | |
projection.fitExtent([[0, 0], [w, h]], gunmaData); | |
geoPath.projection(projection); | |
gunma.selectAll("path") | |
.data(gunmaData.features) | |
.enter() | |
.append("path") | |
.attr("d", geoPath) | |
.attr("stroke", "black") | |
.attr("fill", "gray"); | |
const gunmaCener = geoPath.centroid(gunmaData); | |
gunma.append("text") | |
.attr("text-anchor", "middle") | |
.attr("dominant-baseline", "middle") | |
.attr("transform", "translate("+ gunmaCener+")") | |
.attr("fill", "white") | |
.text("GUNMA"); | |
projection.fitExtent([[0, 0], [w, h]], flanceData); | |
geoPath.projection(projection); | |
france.selectAll("path") | |
.data(flanceData.features) | |
.enter() | |
.append("path") | |
.attr("class", "pref") | |
.attr("d", geoPath) | |
.attr("stroke", "black") | |
.attr("fill", "gray"); | |
const franceCener = geoPath.centroid(flanceData); | |
france.append("text") | |
.attr("text-anchor", "middle") | |
.attr("dominant-baseline", "middle") | |
.attr("transform", "translate(" + franceCener + ")") | |
.attr("fill", "white") | |
.text("FRANCE"); | |
var tog = Toggle(() => { france.classed("change", true) }, ()=> { france.classed("change", false)}); | |
d3.select("#btn").on("click", tog); | |
}); | |
</script> | |
</body> | |
</html> |