如何建立一個基於WEB的工做流編輯器

本系列文章將會說明如何使用D3.js建立一個基於WEB的，具有添加、刪除、移動、複製和粘貼節點及鏈接線，調整佈局功能的工做流編輯器。

基礎知識

• JavaScript + HTML + CSS基礎知識
• D3.js入門教程，一系列簡單易懂的D3.js教程，分爲入門和進階兩個部分。
• 數據可視化實戰-使用D3設計交互式圖表
• D3.js的文檔，必不可少的官方文檔，權威可是也比較難理解。
• 簡單的Meteor知識，推薦閱讀《Discover Meteor》

實現

主要從如下這幾個方面來收集資料，實現功能：

• 畫布，即如何把多個圖形渲染在指定的位置。參考 http://bl.ocks.org/explunit/4659227
• 鏈接，如何把各個圖形以前經過曲線鏈接起來。參考 http://bl.ocks.org/explunit/5603250
• 衝突檢測，如何在添加圖形時使圖形不重疊或覆蓋，參考 http://bl.ocks.org/mbostock/3231298
• 畫筆區域選擇，參考 http://bl.ocks.org/musically-ut/4747894
• 限定範圍的圖形拖動，參考 http://bl.ocks.org/mbostock/1557377

後續文章會圍繞這5個方面進行說明和實現，最終實現一個簡單的用於物聯網工做流編輯器。