• 几个js 拓扑图库


    计划做一个元数据平台, 因为要包含血缘分析功能, 所以要调研一下js 拓扑图库, 候选对象主要参考知乎上的问答, javascript 有哪些适合做网络拓扑图形展示的包?

    https://www.zhihu.com/question/20643359

    ------------------------
    候选库
    ------------------------
    yfiles for html
    (收费)是德国人搞的,很严谨,布局算法很厉害, http://live.yworks.com/yfiles-for-html/2.0/view/graphviewer/index.html
    那个公司还有另一个牛逼产品 yEd

    mxGraph , JavaScript Diagramming and Graph Visualization
    (开源) 是jgraph的html版本,支持低版本的IE是亮点, https://github.com/jgraph/mxgraph


    qunee for html5 , 开发清新、高效的图形组件
    (收费) 国人研发,简洁、高效、用户体验好, http://qunee.com/


    jTopo (Javascript Topology library), 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包
    jTopo(免费) 关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。http://www.jtopo.com/download.html


    d3-force, 基于d3 的一个库
    d3-force(开源) https://github.com/d3/d3-force

    dagre-d3, 另一个基于d3 的一个库, 该github上说开发已经停止了, https://github.com/cpettitt/dagre-d3,  airflow调度系统用它显示 pipeline 的flow图


    ------------------------
    选择
    ------------------------
    当然是要选免费的了, 首选 mxGraph, 样子很漂亮, 文档详尽, 而且从2006年开始一直活跃开发中.  jTopo也算不错.

    mxGraph几个有特点是的例子,

    带图标 https://jgraph.github.io/mxgraph/javascript/examples/fileio.html

    定制化图标位置的示例, https://jgraph.github.io/mxgraph/javascript/examples/fixedicon.html

    鼠标右键菜单, https://jgraph.github.io/mxgraph/javascript/examples/events.html

    更完整的右键菜单, https://jgraph.github.io/mxgraph/javascript/examples/schema.html

    点击node/edge能在属性页签上显示其属性,  https://jgraph.github.io/mxgraph/javascript/examples/userobject.html

    变换布局, https://jgraph.github.io/mxgraph/javascript/examples/graphlayout.html

    node 上label显示的位置, https://jgraph.github.io/mxgraph/javascript/examples/labelposition.html

    node上动态显示alarm, https://jgraph.github.io/mxgraph/javascript/examples/monitor.html

    在图标下方出现context icon按钮, https://jgraph.github.io/mxgraph/javascript/examples/contexticons.html 

    隐藏和显示节点, (这个例子帮助我们实现search功能, 找到一个node, 然后设置style) https://jgraph.github.io/mxgraph/javascript/examples/visibility.html

    动画edge流向图, https://jgraph.github.io/mxgraph/javascript/examples/animation.html

    zoom-in/zoom-out, https://jgraph.github.io/mxgraph/javascript/examples/handles.html

  • 相关阅读:
    css实现多行文本溢出显示省略号(…)全攻略
    Git使用教程
    requireJS对文件合并与压缩(二)
    requireJS(版本是2.1.15)学习教程(一)
    谷歌浏览器javascript调试教程
    IPMITool driver
    ironic的自动化脚本
    serial console
    如何将自己写的代码上传到github上
    硬件检查
  • 原文地址:https://www.cnblogs.com/harrychinese/p/js_flowchart_lib.html
Copyright © 2020-2023  润新知