V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
justfly
V2EX  ›  程序员

Html+js实现拓扑图,求思路!

  •  
  •   justfly · 2013-05-11 18:35:59 +08:00 · 23067 次点击
    这是一个创建于 3993 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有这样一个需求,要实现一个简单的拓扑图,大体类似于星型网络图。想用纯html和js去实现,求一个思路。

    我现在想到的有:

    1.用canvas画,可canvas就是一个画布,不能节点内容中添加链接等功能,它内部不支持HTML标签
    2.用div来表示每一个节点,这种方式最好,便于对节点内容做样式控制还可以在节点里面添加超链接,但是div怎么任意摆放并实现连线,线上还有label的功能就没有思路了。

    各位前端大师和经验丰富的v2exer,能否提供一个思路呢,感谢!
    9 条回复    1970-01-01 08:00:00 +08:00
    pirriperdos
        1
    pirriperdos  
       2013-05-11 18:42:15 +08:00
    d3.js?
    bigdude
        2
    bigdude  
       2013-05-11 18:47:16 +08:00
    qiao
        3
    qiao  
       2013-05-11 18:49:12 +08:00   ❤️ 1
    需要画图同时绑定节点事件的话,你需要的是 SVG 而不是 canvas,推荐楼主看一下 raphael.js http://raphaeljs.com/ 。其 API 设计非常优秀,而且十分容易上手。
    wity_lv
        4
    wity_lv  
       2013-05-11 19:34:51 +08:00
    看了这个你会被震撼到, 不过是商业的:
    http://www.jgraph.com/mxgraph.html

    推荐这个, 基于SVG/VML做了一层封装:
    http://raphaeljs.com/index.html
    mfhh
        5
    mfhh  
       2013-05-12 07:28:54 +08:00
    这玩意不是早就有了么?neo2j就用了。
    mfhh
        6
    mfhh  
       2013-05-12 07:32:44 +08:00
    打错字了。是neo4j的web端。但不记得它用的什么库了。楼主可以装一个看看。
    jiyinyiyong
        7
    jiyinyiyong  
       2013-05-12 10:15:15 +08:00
    身边有同学提过这个, 她找到了 d3 模块可以用来话, 貌似有用
    http://d3js.org/
    ftao
        8
    ftao  
       2013-05-12 13:56:54 +08:00
    这个做过。
    raphael.js 画SVG
    有必要的时候再加一些DIV配合。
    darasion
        9
    darasion  
       2013-05-12 14:29:11 +08:00
    我也非常想找个能很容易实现画一个有向无环图的东西。
    要求能够在节点和连线上绑事件的。

    之前找到的几个,不过没时间研究,也就一直没做成:
    http://www.jgraph.com/mxgraph.html
    http://neyric.github.com/wireit/
    http://jsplumbtoolkit.com/jquery/demo.html
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   998 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:50 · PVG 03:50 · LAX 12:50 · JFK 15:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.