V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
csdoker
V2EX  ›  问与答

在 vue 的项目中,像这样的树状流程图应该怎么实现?

  •  
  •   csdoker · 2018-10-18 09:58:42 +08:00 · 13727 次点击
    这是一个创建于 2224 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目是用 vue 搭建的,然后这个模块是个树状的流程图,要求支持拖动。。找了一圈貌似这样的插件很少? 还是我没找对名字?这种效果有比较成熟的实现么,,自己写确实太苦手 https://image-static.segmentfault.com/902/667/902667311-5bc59fd26ed44_articlex

    D3 ? echarts ? GoJS ?貌似都没现成的我这种效果的插件。。自己改的话感觉要改一大堆配置啊。。 目前找到的就 Antv 好像还比较靠谱 支持节点自定义 但是树形插件又不能拖拽 不知道能不能拓展然后实现我这种效果呢

    16 条回复    2018-10-18 14:07:50 +08:00
    silencefent
        1
    silencefent  
       2018-10-18 10:08:24 +08:00
    百度脑图内种有开源的吧?
    csdoker
        2
    csdoker  
    OP
       2018-10-18 10:10:40 +08:00
    @silencefent 能引入到项目中使用?支持我这种魔改么
    jasonslyvia
        3
    jasonslyvia  
       2018-10-18 10:19:44 +08:00
    jasonslyvia
        4
    jasonslyvia  
       2018-10-18 10:20:21 +08:00
    看起来 OP 已经了解过了。。。恕我眼拙
    csdoker
        5
    csdoker  
    OP
       2018-10-18 10:22:47 +08:00
    @jasonslyvia 我现在就是在看 G6 但是限制还是非常多。。不过比起其他的 已经是我目前找到最靠谱的了。。现在难点就是 g6 的树形插件好像是不支持拖拽的定义的 很蛋疼
    silencefent
        6
    silencefent  
       2018-10-18 10:28:28 +08:00
    csdoker
        7
    csdoker  
    OP
       2018-10-18 10:36:28 +08:00
    @silencefent 大哥。。这个依赖 angularjs 啊 我要在 vue 中使用。。
    wangdashuai
        8
    wangdashuai  
       2018-10-18 10:47:56 +08:00
    我刚好写过一个类似 vue 流程图绘制,仓库地址 https://github.com/ElemeFE/Hachart。
    在线测试地址 https://wangdashuaihenshuai.github.io/demo/flow-chart/
    wangdashuai
        9
    wangdashuai  
       2018-10-18 10:51:06 +08:00
    特点是可以自定义流程图样式。自动排版,不能自己拖动节点,不过解析和绘制是分开的,可以自己 fork 一个更改。
    csdoker
        10
    csdoker  
    OP
       2018-10-18 10:52:42 +08:00
    @wangdashuai 谢谢~我先研究下,,
    csdoker
        11
    csdoker  
    OP
       2018-10-18 10:53:42 +08:00
    @wangdashuai 意思是拖动需要我自己实现嘛,,
    csdoker
        12
    csdoker  
    OP
       2018-10-18 11:01:22 +08:00
    @wangdashuai 我感觉这个东西的难点就是拖动的时候线条的绘制吧。。绘制树形图、拖动节点 我自己都会写 关键是拖动后线条的绘制。。。这个涉及太多数学计算了。。苦手
    AlphaTr
        13
    AlphaTr  
       2018-10-18 12:22:05 +08:00 via iPhone
    jointjs 看看
    csdoker
        14
    csdoker  
    OP
       2018-10-18 12:27:40 +08:00
    @AlphaTr 谢谢~
    csdoker
        16
    csdoker  
    OP
       2018-10-18 14:07:50 +08:00
    @xycool 谢谢~我研究下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5219 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 09:36 · PVG 17:36 · LAX 01:36 · JFK 04:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.