Last active
April 22, 2020 06:00
-
-
Save pm25/2674f28945c36a394aa4d4c9e410485a to your computer and use it in GitHub Desktop.
Taiwan Map - D3JS
This file contains hidden or 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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <title>Taiwan</title> | |
| </head> | |
| <body></body> | |
| </html> |
This file contains hidden or 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
| { | |
| "scripts": [], | |
| "styles": [] | |
| } |
This file contains hidden or 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
| var width = window.innerWidth; | |
| height = window.innerHeight; | |
| var svg = d3 | |
| .select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var projection = d3 | |
| .geoMercator() // 麥卡托投影法 | |
| .center([121, 24]) // 中心點(經緯度) | |
| .scale(6000) // 放大倍率 | |
| .translate([width / 2, height / 2.5]); // 置中 | |
| var path = d3.geoPath().projection(projection); | |
| d3.json("TOWN_MOI_1090324.json").then((taiwan) => { | |
| // 縣市 | |
| svg.selectAll("path") | |
| .data( | |
| topojson.feature(taiwan, taiwan.objects.TOWN_MOI_1090324).features | |
| ) | |
| .enter() | |
| .append("path") | |
| .attr("class", "town") | |
| .attr("d", path); | |
| // 邊界 | |
| svg.append("path") | |
| .attr( | |
| "d", | |
| path( | |
| topojson.mesh( | |
| taiwan, | |
| taiwan.objects.TOWN_MOI_1090324, | |
| (a, b) => a !== b // 消除外部邊界 | |
| ) | |
| ) | |
| ) | |
| .attr("class", "boundary"); | |
| }); |
This file contains hidden or 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
| .town { | |
| fill: #999; | |
| } | |
| .boundary { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 0.5px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment