D3.js V4版本——使用心得体会分享

背景

在公司项目中有关系图的需求，而且定制化的呼声也特别的高，正好也用一用D3.js，所谓技多不压身，有机会干嘛不学呢。做出来的效果大致是这样的

D3.js做出的关系图

实现了这样几个功能：

• 双击球展开和它有关系的所有球
• 点击球、线展示详情
• 两个球有多个关系的时候不能够合并，并且要有具体方向
• 原始的球要和其他球做颜色上的区分
• 能够拖动，而且要Q弹顺滑，并且 拖动过的球要固定住位置，不能再抖动或者随着力导向图到处游走了，就好比黏在了那个位置一样
• ...

于是我就开启了D3.js开发之路，以下是我的几个作品：

随着时间移动而改变的气泡图
能够构建循环关系的Sankey图，任何循环，来着不惧

定义：

看下官方给D3.js的定义：

D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。

从这里我们可以看到D3.js使用的是SVG，相比于Canvas做出的图，好处在于，它不会失真。
但真要做起D3.js的话，官方文档和Demo够大家喝一壶了，有中文文档，但翻译的不够全面，如果各位的英语还不错，建议去看原版文档。

给大家的几点学习建议：

• 先去了解SVG，以及<svg>、<g>、<path>、<textPath>、<text>等等这些SVG里的知识点，大家也可以看我介绍SVG这些标签的文章，我会写的比较详细，并且写一些使用方法和之前遇到的坑。
• 如果写力导向图的话，或者用到Force，建议大家多写写demo体会一下Force里的各种力是干嘛的、都有什么样的效果，不然粘贴复制一把嗦的同学们后期维护成本会很高哦。
• 写的时候尽量能抽出的方法都抽出来，根据功能不同可以分成不同的JS文件，因为用D3.js写一张图，代码量会很多，没有设计好或者没有很强的逻辑思维我建议大家还是规规矩矩的尽量多分一些JS文件
• 一定要看V4的文档、因为D3.js V4 和 V3 很多地方都已经不一样了，有一大部分官方是重新写的。Force就是其中之一，构建力的机制已经不一样了。可以看下官方的说法：

现在的力导向仿真可以很好的扩展：你可以指定哪些受力。这个方法使得作品更柔和。新的力导向也更灵活：可以为每个节点和连接设置参数。可以指定单独的x和y来代替force.gravity。新的link force代替force.linkStrength并且更稳定。新的many-body force代替原有的force.charge并且支持最小距离参数。性能的提高归功于4.0的新的四叉树。4.0提供了冲突解决和向中对齐的方法。

好啦，这篇文章就说这么多，下一篇文章带着大家了解下SVG，详细的说一下SVG中的一些标签和属性，还有一些坑。希望能给大家一些帮助。