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

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

網路上有許多開源視覺化元件，提供良好的資料展示效果，其中D3.js擁有強大的資料分析、處理與展示功能，在大量的使用者支持下不斷更新，持續推出更新穎、絢麗的資料展示效果，其開源的特性，也使得利用更加有彈性。TGOS也提供了相應的方式，讓D3.js所繪製出的視覺化圖形可以順利套疊，只要運用TGOS. TGOverlayView()物件疊加層，即可疊加SVG圖檔，並支援D3.js產製的動畫效果。

由於要使用D3.js開源參照，在建置網頁時，需要將D3.js加入。

    <script src="http://d3js.org/d3.v3.min.js"></script>

在使用物件疊加層時，需要指定一個空物件準備承載資料，在範例中即是CustomLayer。在指定該空物件為TGOS.TGOverlayView()物件後，即可設定坐標系統、寬度、高度等參數，並指定圖層資料放入，在範例中資料物件為layer。

//繼承TGOS.TGOverlayView

        CustomLayer.prototype = new TGOS.TGOverlayView();

在指定layer物件為D3.js的物件後，所有onDraw的部分都會以D3.js的方法實作，請參考D3.js相關方法與參數。

layer = d3.select("#d3Div");