d3.js v4实现关系拓扑图

前言：因为最近公司业务需求，需要在App中实现关系拓扑图。由于自己之前学习了下Vue.js和一些前端知识和ThinkPHP。就自告奋勇把任务接下来了。后来才发现真的是too young too simple，后端数据接口和Android部分都还好说，但这个拓扑图真是让我欲哭无泪，后来了解了Vis.js和百度出品的echart，也都尝试着去实现自己想要的功能。却都因为可定制化差强人意，不能满足我的强迫症而放弃。这时，我的目光落在了d3.js上。比起上面两个框架，虽然d3.js可定制化能力强，但这也意味着学习成本更高，实现难度更大。而最巧的是d3.js从v3版本升级到了v4版本，其中的接口都发生了很大的变化，网上的相关的资料并不多，而且官方文档又是英文比较“简洁”。对新手来说真的十分不友好，我只好看着文档和网上仅有的资料不断抹着眼泪，不断尝试。自己接的任务，跪着也要写完。

以下是核心代码：

主要分为三块：html代码和js代码、css代码，这里css用的预编译器是stylus

stylus学习请移步：http://www.zhangxinxu.com/jq/stylus/

如有疑问：可加QQ394259438 一起学习讨论

参考文章：https://github.com/xswei/d3js_doc/tree/master/API/d3-force-master#simulation_alphaTarget  d3中文文档

                    http://blog.csdn.net/lzhlzz/article/details/40918561   参考项目

                    http://wiki.jikexueyuan.com/project/d3wiki/introduction.html   d3.js v3基础教程

项目地址：https://github.com/VickyGit/topo