用D3.js畫出K線圖 — part 1
最近兩個月在研究D3.js畫出互動式的圖表，想說把研究的結果寫成一篇教學，也許未來有人會用到。
本篇目標
- 什麼是D3.js
- 介紹教學文章
- 了解TechanJS framework
- 根據範例畫出十字線K線圖
- 實作K線圖+成交量＋文字顯示
什麼是D3.js?
D3.js（D3或Data-Driven Documents）是一個使用動態圖形進行資料視覺化的JavaScript程式庫。與W3C標準相容，並且利用廣泛實現的SVG、JavaScript和CSS標準，改良自早期的Protovis程式庫。 （取自維基百科）
目前D3.js常用的版本為v3、v4以及最新的v5，這次介紹的會以d3 v4.0的版本為主。
使用D3.js的好處是網路上很多各式各樣的資源，可以找到跟自己需求類似的圖表並加以修改。例如D3.js官網中的example就有非常多種範例，可以從中找到自己想要做的圖表。
另外推薦一個很棒的網站Bl.ocks，可以自定義搜尋圖表，甚至可以選擇D3的版本，非常方便。
在這邊推薦幾個教學，主要是v3版本的，各個版本的差異主要是在function名稱的改變，個人認為簡化過後的v4版本更為方便，因此使用v.4的版本開發，從下面的例子可以看到code簡短很多，詳細的更動可以看這裡。
d3.svg.axis().scale(x).orient(bottom); => d3.axisBottom(x);推薦教學
教學一：iThome的 D3.js新手開發基本圖表 (版本:v3)
這個人的教學幾乎最常用的圖表樣式都寫過一遍了，跟著寫一遍相信對D3有更深的了解
教學二：oxxostudio (版本:v3)
這個教學也是走短短的範例就讓你看成果的類型，很適合初學者來看，或者google特定關鍵字不知道該方法怎麼使用時，這也是個很好的教學，基本篇之後的教學在這邊
教學三：TutorialsTeacher (版本:v4)
如果不介意看英文教學的話非常推薦這個教學，最大的好處當然就是開發的版本跟我們用的是相同的，再來就是每個教學都寫得非常清楚，從svg的介紹到各種圖形的畫法、如何加上文字在bar chart上都有
進入正題
如何畫出K線圖？
K線圖(candlestick)，去google關鍵字可以找到很多種不同的教學範例，例如Candlestick chart using d3、Zoomable candlestick chart等，那我們要使用的是TechanJS 這個framework
對比一下cmoney的K線圖發現非常類似，K線圖、成交量、5日線、20日線、60日線都有。
基本上這個framework非常方便，我們所需要的功能都有，唯一的缺點就是已經沒有在維護了且document寫得沒有非常齊全，只能去看範例來改寫。
Crosshair範例
來到TechanJS的範例頁面，可以看到他有全部功能都有的All plots，有縮放功能的Plot Zooming及有十字線的Crosshair等許多範例，一開始我們先從最簡單的Crosshair研究起，完整範例。
觀察此圖可以知道有我們所需的K線圖本身、x, y 軸、十字線等功能，接下來就直接看範例code，解釋的地方寫在註解。
K線圖實作
在理解完crosshair的code之後，我們就能以他為基底改成我們想要的樣子了，完整範例，成果圖。
在這裡我們會使用到All Plots中顯示volume（成交量）的方法，根據上圖可以發現下方多了一個區域顯示成交量，做法很簡單，設定兩個y一個是K線圖的y一個是成交量的y。
那畫出成交量的bar chart也只要使用techanJS的function就能完成。
是否有注意到上方的gif在移動的時候，文字會顯示該天的詳細資料呢？作法就是在function move()裡面新增文字顯示方式，那資料則是從function draw() 取得
part 1教學就到這邊，part 2 會介紹更進階的處理方式像是成交量若漲跌幅為0要用灰色顯示、zoom in 的效果、日線/月線顯示等。
敬請期待。
