javascript移动端实现企业图谱

心理对抗阶段

• 由于公司内部调整，要求pc和手机按照业务线打通，所以开始接手企业库的手机端开发 。之前对移动端开发接触比较少，而且是一个开发了很久的项目，代码量已经蛮大的了，被产品的需求推动着接手，一下子还是有点吃不消的。
• 该来的还是会来，整个项目组就剩下我一个前端，经过一系列的努力抗争，还是只能赶鸭子上架，硬着头皮往前冲。

直面困难

• 困难从来都是用来克服的，其实只要是能够排出时间，我还是很乐意接受挑战的，况且移动端也是我一直想找机会涉足的方向，刚好是挑战也是机会。接下来就只能撸起袖子加油干了。

干就完了

在泥潭的边缘谨慎试探

• 开始阅读前辈留下来的手机端项目源码，用的是vue框架，看到的感觉是熟悉而陌生，熟悉是虽然pc端的企业库是jq写的，但我之前常用vue,算是本命框架了，陌生的是对vue在移动端的整个生态系统还是陌生的。而且对vue多页面的开发也不是太熟，所以一开始评估任务工作量的时候仅仅是想着把pc的项目迁移到移动端，并没有阅读手机的代码，也没有充分考虑兼容性等问题，然后导致现在jq项目要在vue里面调用，一脸懵逼~

饭要吃，需求也要做

• 问题比较清晰明确了，那就去找解决方案。

image.png

serch一下，有类似开发需求的人肯定是大有人在。这两个方案都是可行的，我选择的是上面那个，考虑到整个js还是挺大的，import进去会明显增大原来js包的体积，js可以并发请求（6个），不太会造成页面堵塞，js标签引入个人感觉纯净一些。

• 需要注意

1. 既然原始图谱的项目是基于jquery的，必定是要在引入之前先引入jquery。
2. 需要将整个项目封装成一个方法，并挂载到全局window上，供vue项目调用。
3. 同时，原图谱项目是基于es6的面向对象写法，也需要借助webpack等工具打包并babel编译成向下兼容es5的写法。

山的后面是什么？--另一座山

• 解决完代码引用问题，图谱可以在手机项目里面跑起来了，在chrome手机模式下根据ui调整样式，一切显得平淡而美好。
  于是乎上传到服务器上，在真机上试试看。
  纳尼？
  pc上的拖动事件和缩放事件统统失效了。
• 拖动和缩放用的是d3js提供的zoom这个Api，zoom本身有start\zoom\end,分别对应原生事件的mousedown\mousemove\mouseup（touchStart/touchmove/touchend）；但是手机上用的双指缩放，不是鼠标滚轮，这个就不知道如何处理了，查看了下官方给出的api文档：

image.png

这个multiple应该就是双指缩放事件，但是直接写multiple是报错的，
官方解释只是说
“双击和双击启动一个转换，它会发出开始、缩放和结束事件。”
但是这完全不知道该如何书写呀。看来D3的文档被社区吐槽也是有原因的~

• 网上search无果，最终只能选择原生事件撸起来，

原理就是当触发touchstart时候，检测当前触摸点是否大于1，
event.touches.length == 1 即为拖动开始
event.touches.length >= 2 即为双指缩放开始
然后touchmove的时候再同样判断一次，如果是拖动则根据move的位置和start时候的位置计算出滑动距离，用transform进行偏移；
如果是双指， point0 = event.touches[0] 与point1 = event.touches[1]两个坐标点，用勾股定理计算一下手指间距，start的间距与move时候的间距差M，从而得知手指是张开还是收缩的动作，然后自定义一个缩放步伐，即每触发一次缩放的比例，也可以选择用用户手指的动作幅度（M），来决定缩放比例。

• 如果有人对上面提到的d3-zoom的multiple的具体用法熟悉，可以留言分享一下。十分感谢。