D3 Examples - japan.topojson (canvas)

japan.topojson (canvas)

Yuichi Yazaki 作の日本の topojson。 Canvas で最もシンプルな描画。描画点数が多いため、フレームレートはあまり出ない。

データの出典元：地球地図日本

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset='utf-8'>
<script src='//d3js.org/d3.v3.min.js'></script>
<script src='https://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('canvas')
  .attr('width', map.width)
  .attr('height',map.height)
  .call(map.zoom);
map.context = map.canvas.node().getContext('2d');
​
map.draw = function()
{
  map.context.clearRect(0,0,map.width,map.height);
  map.projection.scale(map.scale);
  map.projection.translate(map.translate);
​
  map.context.beginPath();
  map.path(map.prefectures);
  map.context.fill();
  map.context.stroke();
}
​
d3.json('/osoken/raw/b8e5859295757bb2ec5b/japan.topojson',function(error,data)
{
  if (error)
  {
    console.log(error);
    return;
  }
  map.prefectures = topojson.feature(data, data.objects.japan);
  map.projection = d3.geo.mercator()
    .scale(map.scale)
    .translate(map.translate);
  map.path = d3.geo.path().projection(map.projection).context(map.context);
  map.context.lineWidth = 1.2;
  map.context.strokeStyle = '#888';
  map.context.fillStyle = '#ccc';
  map.draw();
});
</script>
​
    