與D3.js開源視覺化元件混搭應用範例

Edit Code :

<!DOCTYPE html>
<html style="width: 100%; height: 100%">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<style id="jsbin-css">
	.gmap{ display: block; width: 880px; height: 600px; }

.stations, .stations svg { position: absolute; }

.stations svg { width: 120px; height: 40px; padding-right: 100px; font: 12px sans-serif; }

.stations circle { fill: blue; stroke: black; stroke-width: 1.5px; }
	</style>
    <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourKey" charset="utf-8"></script>
	
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
        var mapDiv, map;
        //客制化圖層
        var CustomLayer = function (map) {
			this.width = 960;
			this.height = 500;
            //this.rightBottom = new TGOS.TGPoint(124.57836360169523, 21.895638565608042);
            this.setMap(map);
        }
        //繼承TGOS.TGOverlayView
        CustomLayer.prototype = new TGOS.TGOverlayView();
        //實做onAdd，設定疊加層
		var layer = "";
        var data = null;
        CustomLayer.prototype.onAdd = function () {
            //取得欲套疊的地圖承載層
            var panes = this.getPanes();
            var mapLayer = panes.overlayviewLayer;

//設定疊加層座標系統
            this.mSRS = this.map.getCoordSys();
			
			//設定疊加層HTML 物件(DIV)
            this.div = document.createElement("div");
			this.div.id = "d3Div";
			this.div.style.position = "absolute";
			
			//設定定疊加層寬度
            this.div.style.width = "100%";
			
            //設定定疊加層高度
			this.div.style.height = "100%";
			this.div.className = "stations";
			
			//設定定疊加層HTML物件 Style
			this.div.style.zIndex = 1000;
			
			//將div加入至現有圖層中
            mapLayer.appendChild(this.div);
			var width = this.width,
				height = this.height;
			layer = d3.select("#d3Div");
			
			data = [
				{name: "高鐵臺北站", inbound: 13565971, outbound: 13589225, x: 121.515462, y: 25.048046},
				{name: "高鐵板橋站", inbound: 3144451, outbound: 3136364, x: 121.464506, y: 25.013882},
				{name: "高鐵桃園站", inbound: 4425252, outbound: 4311480, x: 121.214989, y: 25.012981},
				{name: "高鐵新竹站", inbound: 4412627, outbound: 4526784, x: 121.040237, y: 24.80834},
				{name: "高鐵臺中站", inbound: 9041009, outbound: 8951044, x: 120.615807, y: 24.111599},
				{name: "高鐵嘉義站", inbound: 2346521, outbound: 2341689, x: 120.323624, y: 23.459492},
				{name: "高鐵臺南站", inbound: 3302397, outbound: 3358420, x: 120.28635, y: 22.924837},
				{name: "高鐵高雄站", inbound: 7786530, outbound: 7809752, x: 120.307861, y: 22.687897},
			];
        }
		
        //實做onDraw
        CustomLayer.prototype.onDraw = function () {
			//Write By Supergeo
			var proj = this.getProjection();
			var padding = 16;
			var pie = d3.layout.pie();
			
			// 設定圖形長寬, 半徑
			var pWidth = 35, pHeight = 40, radius = Math.min(pWidth, pHeight) / 2;
			
			// color
			var color = d3.scale.category10();
			
			var arc = d3.svg.arc()
			.innerRadius(0)
			.outerRadius(radius);

.stations, .stations svg { position: absolute; }

.stations svg { width: 120px; height: 40px; padding-right: 100px; font: 12px sans-serif; }

.stations, .stations svg { position: absolute; }

.stations svg { width: 120px; height: 40px; padding-right: 100px; font: 12px sans-serif; }