| license: gpl-3.0 |
Built with blockbuilder.org
This is my first D3 Block, and I'm still working on it, try hard to learn. :)
Download from here, extract them, and use the commands below:
$ ogr2ogr -f GeoJSON -where "C_Name IN ('高雄市')" municipality.json County_MOI_1041215.shp
$ ogr2ogr -f GeoJSON -where "C_Name IN ('高雄市')" town.json Town_MOI_1041215.shp
$ topojson -o kh.json --id-property OBJECTID --properties name=NAME --shapefile-encoding big5 municipality.json town.json| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
| <style> | |
| /* CSS goes here. */ | |
| .subunit { | |
| fill: #B4E2F2; | |
| /*fill: #000000;*/ | |
| } | |
| .subunit:hover { | |
| fill: #70E15E; | |
| } | |
| .place-label { | |
| font-size: 4pt; | |
| /*color: #FFFFFF;*/ | |
| } | |
| .place-marker { | |
| fill: brown; | |
| /*stroke: black;*/ | |
| /*stroke-width: 1.5px;*/ | |
| } | |
| .place-tip { | |
| line-height: 1; | |
| font-size: 8pt; | |
| /*font-weight: bold;*/ | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: #fff; | |
| border-radius: 2px; | |
| } | |
| /* Creates a small triangle extender for the tooltip */ | |
| .place-tip:after { | |
| box-sizing: border-box; | |
| display: inline; | |
| font-size: 10px; | |
| width: 100%; | |
| line-height: 1; | |
| color: rgba(0, 0, 0, 0.8); | |
| content: "\25BC"; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| /* Style northward tooltips differently */ | |
| .place-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| /* JavaScript goes here. */ | |
| var width = 960, | |
| height = 720; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("kh.json", function(error, kh) { | |
| if (error) return console.error(error); | |
| // // 測試 | |
| // console.log("topojson.feature(kh, kh.objects.town).features"); | |
| // console.log(topojson.feature(kh, kh.objects.town).features); | |
| var projection = d3.geo.mercator() | |
| .center([121, 24]) | |
| .scale(30000) | |
| .translate([500, -250]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var circle_radius = 2; | |
| // // 畫出高雄的輪廓 | |
| // var subunits = topojson.feature(kh, kh.objects.municipality); | |
| // svg.append("path") | |
| // .datum(subunits) | |
| // .attr("d", path); | |
| // 加上 Hover 時要顯示的資訊 | |
| var tip = d3.tip() | |
| .attr('class', 'place-tip') | |
| .offset([-10, 0]) | |
| .html(function(d) { | |
| return "<span>" + d.properties.name + "</span>"; | |
| }) | |
| svg.call(tip); | |
| // 畫出高雄各區的輪廓 | |
| svg.selectAll(".subunit") | |
| .data(topojson.feature(kh, kh.objects.town).features) | |
| .enter().append("path") | |
| .attr("class", function(d) { | |
| return "subunit " + d.id; | |
| }) | |
| .attr("d", path) | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide); | |
| // 加上各區的 Mark | |
| svg.selectAll(".place-marker") | |
| .data(topojson.feature(kh, kh.objects.town).features) | |
| .enter().append("circle") | |
| .attr("class", function(d) { | |
| return "place-marker " + d.properties.name; | |
| }) | |
| .attr("transform", function(d) { // 其實原本位移應該是用 cx, cy，這裡算偷懶？ | |
| var centroid = path.centroid(d), | |
| x = centroid[0], | |
| y = centroid[1]; | |
| return "translate(" + x + "," + y + ")"; | |
| }) | |
| .attr("r", circle_radius); | |
| // 加上各區的文字 | |
| svg.selectAll(".place-label") | |
| .data(topojson.feature(kh, kh.objects.town).features) | |
| .enter().append("text") | |
| .attr("class", "place-label") | |
| .attr("transform", function(d) { | |
| var centroid = path.centroid(d), | |
| x = centroid[0], | |
| y = centroid[1]; | |
| return "translate(" + (x + circle_radius * 2) + "," + y + ")"; | |
| }) | |
| .attr("dy", ".35em") | |
| .text(function(d) { | |
| return d.properties.name; | |
| }); | |
| }); | |
| </script> | |
| </body> |
