Path Transition

.block

license: mit

README.md

パストランジションのサンプル。

左：パスの頂点数を調整していないもの。 右：パスの頂点数を揃えたもの。

Built with blockbuilder.org

d3.geo2square.js

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

};

gunma.geojson

{
"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 ] ] ] } }
]
}

index.html

<!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>

thumbnail.png