D3中級教程之帶有動畫效果的簡易羅盤

最終效果如上圖所示
說是中級教程,代碼其實也太簡單,源碼連接在此

部分解釋一下:
首先 聲明margin,width,height,...這是D3做者推薦的寫法,仍是規範點好,這樣寫,不久你就會發現事半功倍,

其次 是d3.svg.arc()函數,畫圓環全靠它,
自定義getEndAngle(data, max) 函數,用於給定data和圓環的最大值,計算結束角度
自定義getNeedlePosition (data, max)函數,用於給定data和圓環的最大值計算指針路徑(d屬性值)

最後 畫出相應的背景圓環,前景圓環和指針,此處主要用到transition().attrTween()函數產生流暢的動畫效果.
attrTween使用很簡單,返回一個以t爲參數的函數,t由0變爲1,從而產生動畫效果.

思考:其實指針能夠用transform:rotate去作,並實現相應動畫,但記住要rotate只有一個參數時,將圍繞(0,0)旋轉.
好了,就這些吧.但願個人文章能幫助到你,更多資料請翻閱d3js.org,
我是朱現明,任職於精碩科技可視化部門前端開發,更多精彩的文章即將奉上.

---

zhuxianming@admaster.com.cn