JavaScript 生成流程图

最新推荐文章于 2024-06-12 17:13:26 发布
最新推荐文章于 2024-06-12 17:13:26 发布
阅读量2.6w 收藏 26
点赞数 6
分类专栏： HTML&CSS JavaScript 文章标签： 流程图 javascript 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongshaoshuai/article/details/47149261
版权
本文介绍了如何利用JavaScript库dagre-d3和d3.js来创建流程图。提供了两个不同的实现效果，包括对应的html和js文件，以及css样式，帮助读者理解并实现流程图的绘制。
摘要由CSDN通过智能技术生成

插件地址： dagre-d3
引用的资源：
d3.v3.min.js http://d3js.org/d3.v3.min.js
dagre-d3.min.js http://cpettitt.github.io/project/dagre-d3/v0.3.0/dagre-d3.min.js

效果一

html文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="/stylesheets/style.css" />
        <title>workflow-view</title>
    <head>
    <body>
        <svg width=960 height=600><g/></svg>
    <body>
    <script src="/javascripts/plu/jquery.min.js"></script>
    <script src="/javascripts/plu/d3.v3.min.js"></script>
    <script src="/javascripts/plu/dagre-d3.min.js"></script>
    <script src="/javascripts/workflow.js"></script>
<html>

workflow.js

// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

// States and transitions from RFC 793
var states = [ "CLOSED", "LISTEN", "SYN RCVD", "SYN SENT",
               "ESTAB", "FINWAIT-1", "CLOSE WAIT", "FINWAIT-2",
               "CLOSING", "LAST-ACK", "TIME WAIT" ];

// Automatically label each of the nodes
states.forEach(
最低0.47元/天 解锁文章
绿苹果果
关注
  • 6
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
Joint.js动态生成流程图
05-31
动态生成流程图，基于Joint.js的改造。去掉了可以操作属性。直接根据Json数据规则生成。
js生成流程图
04-13
写js生成流程图，功能比较强大，可加以完善灵活运用
d3.js获取流程图不同的节点
最新发布
qq_26889291的博客
06-12 374
在D3.js中，你可以使用和.data()方法将数据绑定到DOM元素，然后使用.enter()和.append()方法根据数据生成新的元素。通过.filter()方法，你可以根据数据中的条件选择特定的节点进行操作。这样，你就可以方便地获取和操作流程图中的不同节点了。通过ai回答的。
JS流程图demo
03-18
JS 流程图，基于qunee，个人研究用的，里面有demo，扩展看个人技术
JAVASCRIPT 画流程图
07-30
JavaScript 画流程图是一种在网页上动态生成流程图的技术，主要应用于数据分析、系统设计、编程教程等场景。本文将深入探讨如何使用JavaScript实现这一功能，包括相关库的使用、自定义绘制以及与其他技术的结合应用...
HTML-无分支流程图快速生成
04-24
无分支流程图生成器 请输入每行一个步骤"> <flow-chart :steps="steps"></flow-chart> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="app.js"></script> ``` 在`app.js`...
纯js实现流程图
09-24
使用纯js实现流程图 Bootstrap
纯JS实现画工作流的流程图
01-17
使用纯JS实现画工作流的流程图，不使用任何插件，是你可以实现自己的WEB工作流设计工具
如何利用Python处理JSON格式的数据，建议收藏！！！
数据森麟
10-14 1920
公众号后台回复“图书“，了解更多号主新书内容作者：俊欣来源：数据分析与篮球JSON数据格式在我们的日常工作中经常会接触到，无论是做爬虫开发还是一般的数据分析处理，今天，小编就来分享一下当...
JS流程图JS流程图
12-21
JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图JS流程图
JS 流程图 流程图插件
06-11
 跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的服务器语言建立的后台上.  跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.  以下从纯技术实现层面具体描述:  页面顶部栏、左边侧边栏均可自定义；  当左边的侧边栏设为不显示时，为只读状态，此时的视图区可当作是一个查看器而非编辑器。  侧边工具栏除了基本和一些流程节点按钮外，还自定义新的节点按钮，自定义节点都可以有自有的图标、类型名称，定义后在使用可可在工作区内增加这些自定义节点。  顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮。  顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件。  可画直线、折线；折线还可以左右/上下移动其中段。  具有区域划分功能，能让用户更直观地了解哪些节点及其相互间的转换，是属于何种自定义区域内的。  具有标注功能，用橙红色标注某个结点或者转换线，一般用在展示流程进度时。  能直接双击结点、连线、分组区域中的文字进行编辑  在对结点、连线、分组区域的各种编辑操作，如新增/删除/修改名称/重设样式或大小/移动/标注时，均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。  具有操作事务序列控制功能，在工作区内的各种有效操作都能记录到一个栈中，然后可以进行撤销（undo()）或重做（redo()），像典型的C/S软件一样。  0.4版中，加入了只导出在初始载入后被编辑的流程图中,只作了增删改等变更的元素，这样可用于用户快速存储，只保存本次变更过的内容，不用重新保存整个流程。  0.5版中，结点的样式不再受到原有程序的限制，所有样式均默认为淡蓝色长方形；如果要指定为圆形，可在初始化时定义结点类型为”原有类型”+” round”；如果要指定为复合结点，则可在初始化时定义结点类型为”原有类型”+” mix”。”原有类型”+” myType”:myType可为自己写的一种特殊样式类.  0.6版中，修正了一些BUG，改善了用户操作体验，并增加在可编辑状态下时，能用键盘上DELETE按键对元素进行删除功能。  0.7版中，修正了一些BUG，增加了连线变更要连的起始结点或结束结点的功能。  0.8版，取消原来的拟物化页面，变成如今的扁平化页面，并且支持主要位置的颜色自定义功能（如果想沿用原来老版本中的拟物化页面，只需保留原来的GooFlow.css文件即可）；修正0.7版中的画线BUG。
Web流程图制作（基于js）
04-30
基于js的流程图制作！可以用于毕业设计，生成XML供别的程序调用
WEB 纯js 流程图展示
05-11
WEB用javascript 生成流程图 可自由定义样式 灵活 方便 简洁
jsdoc-mermaid：一种在jsdocs中自动创建流程图和图表的工具
02-05
jsdoc美人鱼 一个插件，可解析您的JSDocs for 语法并呈现所描述的图和流程图。 入门 # install as a local dependency yarn add -D jsdoc-mermaid # OR npm install -D jsdoc-mermaid 然后将jsdoc-mermaid添加到您的jsdoc配置文件中。 而已！ { "plugins" : [ "jsdoc-mermaid" ] } 用法 使用JSDoc语法使用@mermaid标记记录方法，如下所示： /** * Represents a book. * @constructor *
原生js绘制流程图
素描本里的男子的博客
11-28 3108
<!DOCTYPE html> <html lang="en" onselectstart='return false'> <head> <meta charset="UTF-8"> <title>Document</title> <style type="tex...
js执行流程
qq_61643292的博客
07-30 467
js执行流程、同步异步
js流程图设计Demo
01-03
web js 流程图Demo，界面好看，纯js代码，二次开发容易，基本功能齐全
php js实现流程图,详解js中构造流程图的核心技术JsPlumb（2）_javascript技巧
weixin_39921504的博客
03-23 410
前言：上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示，以及简单的JsPlumb代码示例。这篇还是接着来看看各个效果的代码说明。一、设置连线的样式和颜色效果代码示例大概的效果如图：这些效果看着很简单，那么，我们如何用代码去实现它呢。上章我们说过，JsPlumb的连线样式是由点的某些属性决定的，既然如此，我们就通过设置点的样式来动态改变连线的样式即...
JavaScript语法分析设计流程图
09-05
### 回答1： JavaScript 语法分析的流程图可以包含以下步骤: 1. 读入代码。 2. 去除注释和空格。 3. 识别并处理标识符和关键字。 4. 识别并处理常量。 5. 识别并处理运算符。 6. 将源代码转化为中间代码。 7. 使用中间代码生成目标代码。 8. 保存并输出目标代码。 ### 回答2： JavaScript语法分析的设计流程图如下： 1. 从源代码中获取输入，可以是一个字符串或者是一个代码文件。 2. 将输入传递给词法分析器（Lexer）进行词法分析，将源代码分割成一个一个的词法单元（Token）。 3. 词法分析器根据预定义的语法规则生成词法单元，并进行标记化处理。 4. 将标记化的词法单元传递给语法分析器（Parser）进行语法分析。 5. 语法分析器利用语法规则进行递归下降分析或者其他算法，生成抽象语法树（Abstract Syntax Tree，AST），表示源代码的结构化形式。 6. 在生成AST的过程中，语法分析器进行语法验证，检查语法错误。 7. 如果存在语法错误，将错误信息报告给用户，否则继续进行下一步。 8. 将生成的AST传递给语义分析器（Semantic Analyzer）。 9. 语义分析器对AST进行语义分析，检查变量的定义、类型一致性、函数调用等语义错误。 10. 如果存在语义错误，将错误信息报告给用户，否则继续进行下一步。 11. 将经过语义分析的AST传递给代码生成器（Code Generator）。 12. 代码生成器根据AST生成目标代码，可以是机器码、字节码或者其他形式的中间代码。 13. 将生成的目标代码交给虚拟机或者解释器来执行。 14. 在执行过程中，可以根据需要进行优化，提升执行性能。 15. 执行完毕后，输出结果或者报告可能存在的运行时错误。 以上就是JavaScript语法分析的设计流程图。在实际的实现中，可能会根据具体的需求和技术选择不同的算法和工具来实现，但整体的流程是相似的。 ### 回答3： JavaScript语法分析的设计流程图如下： 1. 开始：定义程序的入口点。 2. 词法分析：将源代码分解为单个的词法单元，如标识符、关键字、运算符、分隔符和常量。 3. 语法分析：根据语法规则，将词法单元组合成语法单元，形成抽象语法树（AST）。 4. 语义分析：对抽象语法树进行语义验证，检查变量的声明和使用是否合法，类型是否匹配等。 5. 生成中间代码：将抽象语法树转换为中间代码（如三地址码、抽象指令集等），以便进行后续优化和生成最终的目标代码。 6. 代码优化：对中间代码进行优化，包括常量折叠、无用代码删除、循环展开等，以提高执行效率和减少代码体积。 7. 目标代码生成：将优化后的中间代码转换为目标机器代码或可执行文件，以便在特定平台上执行。 8. 结束：生成的目标代码或可执行文件可以被执行或部署。 以上是JavaScript语法分析的主要设计流程图，其中词法分析和语法分析是实现一个编译器或解释器的基础，而语义分析、代码优化和目标代码生成则是更高层次的处理，为程序的执行效率和可移植性提供支持。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值