Yuichi Yazaki 作の日本の topojson。
使用しているデータのリポジトリ: https://github.com/dataofjapan/land
データの出典元:地球地図日本
Yuichi Yazaki 作の日本の topojson。
使用しているデータのリポジトリ: https://github.com/dataofjapan/land
データの出典元:地球地図日本
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<body> | |
<div id='map_canvas' style='position:absolute'></div> | |
<script> | |
var map={}; | |
map.width = 960; | |
map.height = 500; | |
map.scale = 862.5420350331074; | |
map.translate = [-1607.5029017610468, 824.1369223542354]; | |
map.zoom = d3.behavior.zoom(); | |
map.zoomed = function() | |
{ | |
map.translate = map.zoom.translate(); | |
map.scale = map.zoom.scale(); | |
map.draw(); | |
} | |
map.zoom.on('zoom',map.zoomed); | |
map.zoom.translate(map.translate); | |
map.zoom.scale(map.scale); | |
map.canvas = d3.select('#map_canvas') | |
.append('svg') | |
.attr('width', map.width) | |
.attr('height',map.height) | |
.call(map.zoom); | |
map.draw = function() | |
{ | |
map.projection.scale(map.scale); | |
map.projection.translate(map.translate); | |
map.canvas.selectAll('path') | |
.attr('d',map.path); | |
} | |
d3.json('japan.topojson',function(error,data) | |
{ | |
if (error) | |
{ | |
console.log(error); | |
return; | |
} | |
map.canvas.append('rect') | |
.attr('x',0).attr('y',0).attr('height',map.height).attr('width',map.width).attr('fill','#F8F8F8'); | |
map.prefectures = topojson.feature(data, data.objects.japan).features; | |
map.projection = d3.geo.mercator() | |
.scale(map.scale) | |
.translate(map.translate); | |
map.path = d3.geo.path().projection(map.projection); | |
map.canvas.append("g") | |
.attr("class", "prefectures") | |
.selectAll("path") | |
.data(map.prefectures) | |
.enter().append("path") | |
.style("fill", '#ccc') | |
.style('stroke', '#888') | |
.style('stroke-width', '1.2px') | |
.attr("d", map.path); | |
map.draw(); | |
}); | |
</script> |