如何建立一个基于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个方面进行说明和实现，最终实现一个简单的用于物联网工做流编辑器。