动态折线图开发问题汇总
最近在给业务方开发动态折线图,期间遇到N多问题,这里做个记录,就当是技术复盘了,避免下次重复踩坑。
共 4 篇文章。
最近在给业务方开发动态折线图,期间遇到N多问题,这里做个记录,就当是技术复盘了,避免下次重复踩坑。
按常规思路来看,网格线就是直线/虚线,那么我们只需要计算好位置,然后通过 line 或者 path 画线条即可。不过这里有一个更精妙的方法,就是将刻度长度设置为负数,即反向延长坐标轴的刻度线:
这是用 D3.js 做关系图时遇到的一个具体需求:节点可以拖动,拖动后连在这个节点上的线要跟着移动。这里记录的是当时采用的方案,核心是利用 JavaScript 的对象引用传递特性来实现【数据驱动】。
上周有个业务组让我们做一个流程图,数据是固定不变的,但是要求流程之间的线条可以动起来。考虑到这个不通用,且我们这边也抽不出人力,因此我让他们自己的开发去学一下,自己写。