d3
飞天代码
这个作者很懒,什么都没留下…
展开
-
采用d3开发流程设计器(七)实现撤销、恢复的功能
撤销和恢复一开始是不想做的,但后来感觉这个功能还是有点必要的,就只好加上了。需求:这里就不介绍了,就是个操作的前进后退功能。其实原理蛮简单的,就是做一些操作的时候将前进、后退操作指令以及相关参数传递给操作事件监听类。注意这里的参数一定是数据层面的,不能有对象层面的传递。 //添加事件操作监听 this.flowDesCtl.flowStackWatch.push( "window.flowDesCtl.removeNode", "window.flowDesCt原创 2020-06-16 12:54:55 · 881 阅读 · 5 评论 -
采用d3开发流程设计器(六)通过拖拽选中多个节点,然后拖动调整位置
需求:1:当图绘制一半时候,需要对多个节点位置进行调整,通过拖拽选中多个节点,然后进行调整。2、选中多个记录,点击删除来进行多个节点删除。效果图:选中多个节点进行拖拽移动。关键代码:第一步拖拽的时候创建一个临时的rect,并且设置透明度为0.7/** * 初始化一个用于拖拽都rect区块 * @param containerId */FlowDragSelArea.prototype.init=function (containerId) { this.flowDesCtl原创 2020-06-10 16:22:22 · 1537 阅读 · 2 评论 -
采用d3开发流程设计器(五)实现节点间线条的拖拽变换
一晃这设计器也写了快一周了,基本功能已经出来咯。但完全做完应该还需要个把月吧。这节我们介绍下节点间线条的拖拽变换的功能:需求:1、点击线条,会在线条俩端生成2个拖拽节点。2、点击拖拽节点可以变换线条的起始位置或者是结束位置。效果图:点击拖拽节点进行线条位置的变换核心代码:点击线条绘制拖拽节点:/** * 创建激活的link * @private */FlowLink.prototype._createLinkActiveNode = function (d, linkId,原创 2020-06-05 17:31:32 · 1212 阅读 · 2 评论 -
采用d3开发流程设计器(四)实现线条的绘制,以及线条的箭头
前面三节完成了开始、结束、普通节点的拖拽生成,这些都还比较简单,这节来实现下线条都绘制以及拖拽相关功能:需求:1、拖拽生成线条,连接2个节点2、拖拽节点的时候 线条跟着移动3、选中线条变换样式4、右键点击可以删除线条5、线条末端带上箭头效果大概:其中拖拽的时候...原创 2020-06-04 14:26:20 · 1939 阅读 · 2 评论 -
采用d3开发流程设计器(三)添加普通任务节点
1、普通任务节点是流程里面的最常用的节点,这种节点是rect形状需求:普通节点可以进行拖拽普通节点可以进行大小变化普通节点可以拖拽出线条,跟其他节点连接线条可以跟普通节点连接第一次这么深入的玩svg和d3 还是走来蛮多冤枉路,废话不多说了,上效果图吧。这里面设计几个技巧1、text节点和边框拖拽节点和节点rect要实现在一个g里头,这样拖拽事件给g即可,不需要每个元素去监听拖拽。2、拖拽的时候,要对window.d3.event.x进行特殊的计算处理,因为rect节点的宽高都比较大,原创 2020-05-31 23:23:38 · 890 阅读 · 0 评论 -
采用d3开发流程设计器(二)添加右键菜单
上一节完成了架子的搭建以及节点的拖拽,这节完成节点菜单右键的操作需求:1、右键点击节点,弹出菜单,选中属性菜单项,右边再弹出菜单配置panel2、点击其他节点或者界面空白处隐藏下拉菜单效果图:点击弹出右边的panel其中的核心代码:第一步:注册右键菜单 node.append("circle") .attr("r", nodeWidth) .attr("fill", nodeColor) .on("click", d => {原创 2020-05-28 09:46:48 · 1872 阅读 · 1 评论 -
采用d3开发流程设计器(一)搭建框架和节点拖拽
企业业务里面很少会采用横向组织机构树来展示,一般都是通过纵向组织机构树来进行展示,所以将前俩天写的代码扩展了下,扩展出了纵向组织机构树。原创 2020-05-27 16:51:40 · 1974 阅读 · 3 评论