パストランジションのサンプル。
左:パスの頂点数を調整していないもの。 右:パスの頂点数を揃えたもの。
Built with blockbuilder.org
license: mit |
パストランジションのサンプル。
左:パスの頂点数を調整していないもの。 右:パスの頂点数を揃えたもの。
Built with blockbuilder.org
if(!d3.geo2square) d3.geo2square = function(coordinates, width, height) { | |
var centroid =d3.polygonCentroid(coordinates) | |
width = (width) ? width : 0 ; | |
height = (height) ? height : 0 ; | |
var p = [] | |
var i = 0 | |
var length = coordinates.length | |
var qtr = ~~(length/4) | |
var nScale = d3.scaleLinear().domain([0, qtr]).range([0, width]) | |
var sScale = d3.scaleLinear().domain([0, qtr]).range([width, 0]) | |
var wScale = d3.scaleLinear().domain([0, qtr]).range([0, height]) | |
var eScale = d3.scaleLinear().domain([0, qtr]).range([height, 0]) | |
while (i < length) { | |
if (i <= qtr){ | |
p.push([ centroid[0]+nScale(i), centroid[1] ]) | |
} | |
else if (i <= qtr*2){ | |
p.push([ centroid[0]+width, centroid[1] + wScale(i-qtr) ]) | |
} | |
else if (i <= qtr*3){ | |
p.push([ centroid[0]+sScale(i-qtr*2), centroid[1]+height ]) | |
} | |
else if (i <= qtr*4){ | |
p.push([ centroid[0], centroid[1]+eScale(i-qtr*3) ]) | |
} | |
i++ | |
} | |
return p | |
}; |
{ | |
"type": "FeatureCollection", | |
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, | |
"features": [ | |
{ "type": "Feature", "properties": { "ObjName": "10", "ObjName_1": "Gunma", "JIS-CODE": 10 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 138.711669921875, 35.982799530029297 ], [ 138.708709716796875, 35.983749389648438 ], [ 138.688674926757812, 35.993656158447266 ], [ 138.6712646484375, 36.009090423583984 ], [ 138.63299560546875, 36.027027130126953 ], [ 138.635589599609375, 36.043502807617195 ], [ 138.6390380859375, 36.063213348388672 ], [ 138.6307373046875, 36.084171295166016 ], [ 138.64300537109375, 36.106178283691406 ], [ 138.631362915039062, 36.128437042236328 ], [ 138.602127075195312, 36.136833190917969 ], [ 138.589385986328125, 36.153724670410156 ], [ 138.5810546875, 36.171398162841797 ], [ 138.602218627929688, 36.166553497314453 ], [ 138.627456665039062, 36.174636840820312 ], [ 138.621612548828125, 36.195896148681648 ], [ 138.628936767578153, 36.210498809814453 ], [ 138.613250732421875, 36.226516723632812 ], [ 138.610916137695312, 36.244281768798828 ], [ 138.609832763671875, 36.280654907226562 ], [ 138.63861083984375, 36.292171478271484 ], [ 138.648223876953125, 36.308521270751953 ], [ 138.650375366210938, 36.325122833251953 ], [ 138.64996337890625, 36.349567413330078 ], [ 138.65203857421875, 36.371341705322266 ], [ 138.649627685546875, 36.399288177490234 ], [ 138.635848999023438, 36.415054321289062 ], [ 138.61676025390625, 36.419811248779297 ], [ 138.5897216796875, 36.424148559570312 ], [ 138.551177978515625, 36.414806365966797 ], [ 138.520858764648438, 36.408878326416016 ], [ 138.49139404296875, 36.411380767822266 ], [ 138.463653564453125, 36.406291961669922 ], [ 138.452484130859375, 36.419139862060547 ], [ 138.41937255859375, 36.429817199707038 ], [ 138.401596069335938, 36.437240600585945 ], [ 138.401168823242188, 36.459682464599616 ], [ 138.398681640625, 36.482372283935554 ], [ 138.400177001953125, 36.501224517822266 ], [ 138.408172607421903, 36.525337219238281 ], [ 138.412353515625, 36.538852691650391 ], [ 138.427947998046875, 36.564716339111328 ], [ 138.423614501953125, 36.578815460205078 ], [ 138.429397583007812, 36.594581604003906 ], [ 138.44775390625, 36.609390258789062 ], [ 138.4609375, 36.631790161132812 ], [ 138.477081298828125, 36.643638610839844 ], [ 138.498611450195312, 36.644222259521491 ], [ 138.524871826171875, 36.656234741210938 ], [ 138.529052734375, 36.669998168945312 ], [ 138.523712158203125, 36.692775726318359 ], [ 138.542816162109375, 36.702785491943359 ], [ 138.559661865234375, 36.706287384033203 ], [ 138.588287353515625, 36.707542419433594 ], [ 138.6083984375, 36.710128784179688 ], [ 138.62567138671875, 36.719722747802734 ], [ 138.671127319335938, 36.729984283447266 ], [ 138.691818237304688, 36.736660003662109 ], [ 138.69598388671875, 36.73724365234375 ], [ 138.69598388671875, 36.73724365234375 ], [ 138.710174560546875, 36.739162445068359 ], [ 138.729736328125, 36.758895874023438 ], [ 138.768157958984375, 36.7479248046875 ], [ 138.796035766601591, 36.753513336181641 ], [ 138.823089599609375, 36.766990661621094 ], [ 138.830642700195312, 36.792392730712891 ], [ 138.824127197265625, 36.811996459960938 ], [ 138.852493286132812, 36.812080383300781 ], [ 138.870010375976562, 36.815086364746094 ], [ 138.885543823242188, 36.823097229003906 ], [ 138.910736083984375, 36.827098846435547 ], [ 138.9285888671875, 36.834606170654297 ], [ 138.921249389648438, 36.854793548583984 ], [ 138.920745849609375, 36.871814727783203 ], [ 138.930999755859375, 36.888668060302734 ], [ 138.9522705078125, 36.89300537109375 ], [ 138.97430419921875, 36.888336181640625 ], [ 138.980636596679688, 36.904018402099609 ], [ 138.973129272460938, 36.925045013427734 ], [ 138.964950561523438, 36.952907562255859 ], [ 138.973342895507812, 36.977180480957031 ], [ 139.006591796875, 36.981937408447266 ], [ 139.0281982421875, 36.984275817871094 ], [ 139.04571533203125, 36.986610412597656 ], [ 139.060134887695341, 37.000625610351562 ], [ 139.088836669921875, 37.017398834228516 ], [ 139.10101318359375, 37.050056457519531 ], [ 139.1246337890625, 37.041843414306641 ], [ 139.131973266601562, 37.026824951171882 ], [ 139.144989013671875, 37.015140533447266 ], [ 139.16839599609375, 36.997547149658203 ], [ 139.177703857421875, 36.980445861816406 ], [ 139.1807861328125, 36.963844299316406 ], [ 139.207733154296875, 36.955917358398438 ], [ 139.230590820312528, 36.954162597656257 ], [ 139.236434936523438, 36.949245452880859 ], [ 139.236434936523438, 36.949245452880859 ], [ 139.235992431640625, 36.940189361572266 ], [ 139.25628662109375, 36.930637359619141 ], [ 139.2838134765625, 36.928386688232422 ], [ 139.315093994140625, 36.922550201416016 ], [ 139.339675903320312, 36.922885894775391 ], [ 139.362396240234375, 36.916374206542969 ], [ 139.387847900390625, 36.908618927001953 ], [ 139.392364501953125, 36.902828216552734 ], [ 139.392364501953125, 36.902828216552734 ], [ 139.390777587890625, 36.901363372802734 ], [ 139.372833251953125, 36.889015197753906 ], [ 139.362747192382812, 36.8768310546875 ], [ 139.355682373046875, 36.852428436279297 ], [ 139.37542724609375, 36.8367919921875 ], [ 139.395278930664062, 36.820148468017578 ], [ 139.380752563476562, 36.804920196533203 ], [ 139.375335693359375, 36.790241241455078 ], [ 139.35931396484375, 36.776058197021484 ], [ 139.357986450195312, 36.751361846923828 ], [ 139.367080688476562, 36.735343933105469 ], [ 139.36492919921875, 36.717994689941406 ], [ 139.354415893554688, 36.706314086914062 ], [ 139.341232299804688, 36.691291809082031 ], [ 139.33062744140625, 36.658260345458984 ], [ 139.331634521484403, 36.631149291992188 ], [ 139.3463134765625, 36.620967864990234 ], [ 139.367919921875, 36.612377166748054 ], [ 139.388442993164062, 36.608871459960938 ], [ 139.407058715820312, 36.604534149169929 ], [ 139.433990478515625, 36.60186767578125 ], [ 139.460479736328125, 36.605621337890625 ], [ 139.476715087890625, 36.592021942138672 ], [ 139.48046875, 36.575756072998047 ], [ 139.446762084960938, 36.551017761230469 ], [ 139.438018798828125, 36.531204223632812 ], [ 139.423446655273438, 36.498752593994141 ], [ 139.429672241210938, 36.480064392089844 ], [ 139.43475341796875, 36.464801788330078 ], [ 139.413604736328125, 36.451160430908203 ], [ 139.392532348632812, 36.424671173095703 ], [ 139.378097534179688, 36.407150268554688 ], [ 139.370849609375, 36.391716003417969 ], [ 139.369094848632812, 36.369606018066406 ], [ 139.387451171875, 36.352256774902344 ], [ 139.406478881835938, 36.339576721191406 ], [ 139.424057006835938, 36.331192016601562 ], [ 139.4219970703125, 36.313381195068359 ], [ 139.436004638671875, 36.296951293945312 ], [ 139.451278686523438, 36.289440155029297 ], [ 139.464126586914062, 36.280010223388672 ], [ 139.486740112304688, 36.27484130859375 ], [ 139.507431030273438, 36.280849456787109 ], [ 139.53045654296875, 36.280933380126953 ], [ 139.548141479492188, 36.278846740722656 ], [ 139.565826416015625, 36.274177551269531 ], [ 139.609588623046875, 36.269088745117188 ], [ 139.633224487304688, 36.265922546386719 ], [ 139.638565063476562, 36.247982025146484 ], [ 139.651763916015625, 36.236968994140625 ], [ 139.666183471679688, 36.219535827636719 ], [ 139.670425415039062, 36.210441589355476 ], [ 139.670425415039062, 36.210441589355476 ], [ 139.660293579101562, 36.209476470947266 ], [ 139.64739990234375, 36.199451446533203 ], [ 139.622848510742188, 36.191795349121094 ], [ 139.603515625, 36.201869964599609 ], [ 139.588516235351562, 36.209125518798828 ], [ 139.559432983398438, 36.200897216796875 ], [ 139.529464721679688, 36.192256927490234 ], [ 139.498001098632812, 36.193294525146484 ], [ 139.472564697265625, 36.189697265625 ], [ 139.455764770507812, 36.191913604736328 ], [ 139.438140869140625, 36.200481414794922 ], [ 139.420303344726562, 36.214584350585938 ], [ 139.407989501953125, 36.22357177734375 ], [ 139.392379760742188, 36.229377746582031 ], [ 139.37481689453125, 36.244586944580078 ], [ 139.350738525390625, 36.249767303466797 ], [ 139.323822021484375, 36.234806060791016 ], [ 139.297622680664062, 36.243236541748047 ], [ 139.265121459960938, 36.246967315673828 ], [ 139.231704711914062, 36.251632690429688 ], [ 139.20806884765625, 36.261795043945312 ], [ 139.190643310546875, 36.265460968017578 ], [ 139.167831420898438, 36.276725769042969 ], [ 139.141357421875, 36.280529022216797 ], [ 139.12371826171875, 36.273612976074219 ], [ 139.111404418945312, 36.262691497802734 ], [ 139.09979248046875, 36.248313903808594 ], [ 139.094268798828125, 36.229507446289062 ], [ 139.083404541015625, 36.212295532226562 ], [ 139.070358276367188, 36.200954437255859 ], [ 139.063858032226562, 36.182704925537109 ], [ 139.064620971679688, 36.162448883056641 ], [ 139.053970336914062, 36.148277282714844 ], [ 139.0382080078125, 36.128196716308594 ], [ 139.014144897460938, 36.131755828857422 ], [ 138.99346923828125, 36.122005462646484 ], [ 138.967376708984375, 36.117271423339844 ], [ 138.953521728515625, 36.103130340576172 ], [ 138.929428100585938, 36.090618133544922 ], [ 138.900283813476562, 36.089580535888672 ], [ 138.88287353515625, 36.082389831542969 ], [ 138.867935180664062, 36.075199127197266 ], [ 138.852645874023438, 36.06890869140625 ], [ 138.837921142578125, 36.052730560302734 ], [ 138.823272705078125, 36.037868499755859 ], [ 138.792098999023438, 36.033340454101562 ], [ 138.760299682617188, 36.035865783691406 ], [ 138.74945068359375, 36.021553039550781 ], [ 138.734893798828125, 36.003025054931641 ], [ 138.713363647460938, 35.987400054931641 ], [ 138.711669921875, 35.982799530029297 ] ] ] } } | |
] | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> | |
<title>Path トランジション</title> | |
<style> | |
html, body { | |
width: 100%; | |
height: 100%; | |
padding:0px; | |
margin:0px; | |
} | |
.wrapper { | |
width: 49.75%; | |
height: 100%; | |
border: 1px solid black; | |
float:left; | |
} | |
svg { | |
width: 100%; | |
height: 90%; | |
} | |
.button { | |
background-color: #4CAF50; | |
border: none; | |
color: white; | |
padding: 10px 32px; | |
text-align: center; | |
text-decoration: none; | |
display: inline-block; | |
font-size: 16px; | |
border-top: 1px solid #ccc; | |
border-right: 1px solid #999; | |
border-bottom: 1px solid #999; | |
border-left: 1px solid #ccc; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<button id="run1" class="button">transiton >></button> | |
<svg id="example1"></svg> | |
</div> | |
<div class="wrapper"> | |
<button id="run2" class="button">transiton >></button> | |
<svg id="example2"></svg> | |
</div> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> | |
<script src="d3.geo2square.js"></script> | |
<script> | |
!(function(){ | |
var svg = d3.select("#example1") | |
var width = svg.node().clientWidth | |
var height = svg.node().clientHeight | |
var sqHeight = height -20 | |
var sqHeight = height -20 | |
var projection = d3.geoMercator() | |
var geoPath = d3.geoPath().projection(projection) | |
d3.json("gunma.geojson",main) | |
function main(geo) { | |
var linedata = [ | |
{x:10, y:10}, | |
{x:sqHeight, y:10}, | |
{x:sqHeight, y:sqHeight}, | |
{x:10, y:sqHeight}, | |
{x:10, y:10}, | |
] | |
var line = d3.line() | |
.x(function(d) { return d.x }) | |
.y(function(d) { return d.y }) | |
projection.fitExtent([[0, 0], [width, height]], geo) | |
var path = svg.append("path") | |
.attr("fill", "none") | |
.attr("fill-opacity", 0.8) | |
.attr("stroke", "blue") | |
.attr("stroke-width", 2) | |
var data = {} | |
geo.features.forEach(function(d){ | |
data.geoPath = geoPath(d) | |
data.squarePath = line(linedata) | |
}) | |
var drawMaps = function(data) { | |
path | |
.transition().duration(1000) | |
.attr("d", data.geoPath) | |
} | |
var drawSquare = function(data) { | |
path | |
.transition().duration(1000) | |
.attr("d", data.squarePath) | |
} | |
toggleFn = toggle(function(){ | |
drawSquare(data) | |
}, | |
function(){ | |
drawMaps(data) | |
}) | |
d3.select("#run1").on("click", toggleFn) | |
drawMaps(data) | |
} | |
}()) | |
!(function(){ | |
var svg = d3.select("#example2") | |
var width = svg.node().clientWidth | |
var height = svg.node().clientHeight | |
var sqHeight = height -20 | |
var projection = d3.geoMercator() | |
var geoPath = d3.geoPath().projection(projection) | |
d3.json("gunma.geojson",main) | |
function main(geo) { | |
var line = d3.line() | |
.x(function(d) { return d[0] }) | |
.y(function(d) { return d[1] }) | |
projection.fitExtent([[0, 0], [width, height]], geo) | |
var path = svg.append("path") | |
.attr("fill", "none") | |
.attr("fill-opacity", 0.8) | |
.attr("stroke", "blue") | |
.attr("stroke-width", 2) | |
var data = {} | |
geo.features.forEach(function(d){ | |
data.geoPath = geoPath(d) | |
data.squarePath = line(d3.geo2square(d.geometry.coordinates[0].map(projection), sqHeight, sqHeight)) | |
var center = geoPath.centroid(d.geometry); | |
var x = center[0]; | |
var y = center[1]; | |
var nx = 10 | |
var ny = 10 | |
data.center = {x:x, y:y, nx:nx, ny:ny} | |
}) | |
var drawMaps = function(data) { | |
path | |
.transition().duration(1000) | |
.attr("d", data.geoPath) | |
.attr("transform", 'translate(0,0)') | |
} | |
var drawSquare = function(data) { | |
path | |
.transition().duration(1000) | |
.attr("d", data.squarePath) | |
.attr("transform", 'translate('+(0-data.center.x)+','+(0-data.center.y)+'),translate('+data.center.nx+','+data.center.ny+')') | |
} | |
toggleFn = toggle(function(){ | |
drawSquare(data) | |
}, | |
function(){ | |
drawMaps(data) | |
}) | |
d3.select("#run2").on("click", toggleFn) | |
drawMaps(data) | |
} | |
}()) | |
function toggle(){ | |
var fn = arguments; | |
var l = arguments.length; | |
var i = 0; | |
return function(){ | |
if(l <= i) i=0; | |
fn[i++](); | |
} | |
} | |
</script> | |
</body> | |
</html> |