Last active
March 7, 2018 06:37
-
-
Save shimizu/44bfe038e1ba6942b4ba to your computer and use it in GitHub Desktop.
Presimplify Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>presimplify example</title> | |
<style> | |
html, body { | |
width:100%; | |
height: 100%; | |
margin: 0px; | |
padding: 0px; | |
} | |
svg { | |
width:99.9%; | |
height: calc(100% - 30px); | |
} | |
#range { | |
width:99.5%; | |
} | |
</style> | |
<body> | |
<input id='range' class='range' type='range' min='0', max='0.2' step='any' value="0"/> | |
<svg></svg> | |
<script src="//unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> | |
<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script> | |
<script type="text/babel"> | |
const svg = d3.select('svg'); | |
const projection = d3.geoMercator(); | |
let currentSimplyThd = 0; | |
d3.json('https://gist.githubusercontent.com/shimizu/68288d9ec87c7c3b885f/raw/d7ac8606debdfc871edd2c681f7f01e4d264f3ef/japan.topojson', function(json) { | |
//簡素化のためのデータ(隣接する3点を結んだ三角形の面積)を付加する | |
const presimplify = topojson.presimplify(json); | |
//topjson->geojson | |
const geojson = topojson.feature(presimplify, presimplify.objects.japan); | |
//描画処理実行 | |
draw(geojson, currentSimplyThd); | |
const reDraw = draw.bind(null, geojson); | |
d3.select("#range").on("input", function(){ | |
currentSimplyThd = this.value; | |
reDraw(currentSimplyThd); | |
}); | |
d3.select(window).on("resize", function(){ | |
reDraw(currentSimplyThd); | |
}); | |
}); | |
//地形を描画する | |
function draw(geojson, threshold){ | |
const w = svg.node().clientWidth; | |
const h = svg.node().clientHeight; | |
projection.fitExtent([[0, 0], [w, h]], geojson); | |
//簡素化のためのカスタムストリームリスナーを設定 | |
const simplify= d3.geoTransform({ | |
point: function(x, y, z) { | |
//隣接した3点を結んだ面積が閾値を超えるものだけをpixcel座標に変換する | |
if (z >= threshold) this.stream.point(projection([x, y])); | |
} | |
}); | |
//pixcel座標のコレクションをpath要素のd属性に渡すパスデータ形式に変換する関数を生成 | |
const path = d3.geoPath().projection(simplify); | |
//path(地形)要素を追加する | |
const updateMaps= svg.selectAll('.map').data([geojson]) | |
const enterMaps = updateMaps.enter() | |
.append("path") | |
.attr("class", "map") | |
.attr("fill", "none") | |
.attr("stroke", "black") | |
updateMaps.merge(enterMaps) | |
.attr("d", path) | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment