iT邦幫忙

DAY 1
3

SVG 與 D3.js系列 第 1

2014 鐵人賽慢慢開始跑 [d3js 與 SVG]

和朋友有聊到鐵人賽這次的發文問題,確實問題挺多的...,或許這也是鐵人的挑戰之一吧,不過還好我有自備Blog,建議可以連到我提供的網址觀看~

以下文章同步發表於 http://wcc723.github.io/d3js/2014/09/30/Ironman-30-days-01/

去年參加了鐵人賽,主題是CSS,這過程中讓我獲得很多, 重點並不是在於得獎,而是在每天追求的過程中,必須在有限的時間內不斷地追求知識, 也不斷的挖掘有什麼是可以分享的。

先簡單自我介紹一下背景

  • 我是一位設計師,目前是專職前端的工程師
  • 去年鐵人賽摸到了優選
  • 技術的Blog : http://wcc723.github.io

在今年的工作中,我感受到SVG (Scalable Vector Graphics)的未來性 原因如下:

  • XML標準 (相對於Canvas更容易使用CSS、JS控制)
  • 向量圖形 (目前的裝置解析度不一,而向量圖沒有解析度問題)
  • 格式靈活,可以用繪圖軟體或是純文字繪製

SVG library

剛剛有提到,SVG有許多執行的方式,我是視覺設計出身,就會想直接用繪圖軟體畫,然後再轉存成svg格式檔案,但是這樣並沒有辦法動,所以就需要透過CSS 或是 JS。

相關的JS lib 以及 plugin 相當的多,下面介紹兩款主流的lib。

Snap.js

http://snapsvg.io

透過Snap,可以更容易繪製動態的SVG圖形,假設設計師已經提供了向量原始檔,在結合Snap,就能夠像以前的Flash做出豐富的HTML5互動網站(它說像用jQuery控制DOM一樣容易...)。

對Snap繪製互動圖形有興趣,也可以參考它的基本教學

http://snapsvg.io/start/

D3.js

http://d3js.org

當然,這次我報名的是D3.js,所以當然這就是這次的主角。D3在中文上的翻譯是”資料驅動文件”,圖形化的過程中,資料是非常重要的,選擇D3一部份原因也是工作需求。

參考資料

D3的學習資料相當多,在這三十天中,我會先簡單介紹SVG,接下來再透過Oreilly所出版的網頁互動式資料視覺化的教學來習作,另外還會搜尋許多的範例及資料來學習。

所以這三十篇不會是教學,而是個人學習記錄分享,而到了最後會有其他延伸運用。當然有遇到任何問題,也是會跟大家討論。


下一篇
D3.js 前的SVG簡介
系列文
SVG 與 D3.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言