const $PAPER = $("#paper"), $WRAP = $("#wrap"); $PAPER.css('cursor', 'grab'); // 通过jointjs点击事件绑定
用法 paper.fitToContent({ padding: 20, // 内容周围留白大小 allowNewOrigin: 'any' // 注意此配置如果不填,padding的top和left属性不会生效 }) 源码 fitToContent: function(gridWidth, gridHeight, padding, opt) { // alternatively function(opt) if (isObject$1(gridWidth)) { /
JointJS官网 依赖:jquery,lodash,backbone 如果使用自动排版,需要添加依赖:dagre,graphlib 文中样例使用的资源文件 样例 源码 <!
(2) jointjs(DavidDurman/joint)。获得了运行时的数据后,我需要将其可视化,而jointjs就是我找到的一个最称手的工具(但不完美)。 我本来是想用d3.js或者sigma.js来做这事的,但前者太基础,需要写很多代码,后者表述的图形种类太少,所以我最终选定了jointjs。 (3) websocketd。 找齐了「轮子」后,我打算这么「搭积木」:使用websocketd来运行systemtap抓取数据(systemtap把数据输出到stdout,websocketd将其发到浏览器),然后前端生成jointjs 昨天我本来想修改一下代码,先将中间结果保存在图形数据库neo4j里面(使用neo4django),然后再考虑绘图的事(或直接用jointjs展示到前端),可惜时间不够就放弃了,我还需要写slides做pitch 我在参加这次hackathon之前从未用过 graphviz(pygraphviz),jointjs,neo4django等等工具,都是现看文档现学习,很受用,很享受learning by doing的快乐
有免费版和收费版 joint.js http://www.jointjs.com/ joint.js 是另一个创建图标库的工具,也提供免费版和商业版 jsPlumb http://www.jsplumb.org
参考资料 [1] javascript-ast: https://resources.jointjs.com/demos/javascript-ast [2] 深入浅出 Babel 上篇:架构和原理 + : https://blog.csdn.net/qq_38836118/article/details/98878286 [4] javascript-ast: https://resources.jointjs.com
跟同类项目比一比:优势明显 项目拖拽交互自定义节点/样式插件机制前端执行数据互转星级LogicFlow✅✅✅✅✅10kGoJS✅部分❌❌部分4k+JointJS✅✅❌❌部分6k+draw.io✅✓❌❌❌
可以通过这个网站查看 AST 的结构:https://astexplorer.net/[17] 也可以通过这个链接https://resources.jointjs.com/demos/javascript-ast v8.dev/docs/turbofan [17] https://astexplorer.net/: https://astexplorer.net/ [18] https://resources.jointjs.com /demos/javascript-ast: https://resources.jointjs.com/demos/javascript-ast [19] V8 解释器的头文件,包括所有字节码: https
通过网站 https://www.jointjs.com/demos/abstract-syntax-tree 可以可视化地观察 AST 的结构化表示。
参考这个网址给出的演示,https://resources.jointjs.com/demos/javascript-ast,如下的表达式将被解析出一颗AST树。
GoJS / JointJS / mxGraph (draw.io): 强大的通用图形库,提供了丰富的功能(拖拽、连线、节点、缩放等)。你需要在此基础上自行构建流程节点、属性面板和交互逻辑。
Rappid是JointJS Core库的商业扩展。 52 Sigma.JS 根据MIT许可发布的JavaScript库,专用于图形绘制。