使用Js和H5绘制流程图

主要使用的项目

dagre-d3 | 详细文档

简化一下官方的一个demo为我所用
其中依赖的两个Js文件
https://d3js.org/d3.v4.min.js
https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js

<!doctype html><meta charset="utf-8">
<title>Dagre D3 Demo: Sentence Tokenization</title><script src="/js/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/dagre-d3.min.js"></script><style id="css">/* This sets the color for "TK" nodes to a light blue green. */g.type-TK > rect {fill: #00ffd0;}text {font-weight: 300;font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;font-size: 14px;}.node rect {stroke: #999;fill: #fff;stroke-width: 1.5px;}.edgePath path {stroke: #333;stroke-width: 1.5px;}
</style><svg id="svg-canvas" width=960 height=600></svg><script >// Create the input graphvar g = new dagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function() { return {}; });// Here we"re setting nodeclass, which is used by our custom drawNodes function// below.g.setNode(0,  { label: "TOP",       class: "type-no" });g.setNode(1,  { label: "S",         class: "type-S" });g.setNode(2,  { label: "NP",        class: "type-NP" });g.setNode(3,  { label: "DT",        class: "type-DT" });g.setNode(4,  { label: "This",      class: "type-TK" });g.setNode(5,  { label: "VP",        class: "type-VP" });g.setNode(6,  { label: "VBZ",       class: "type-VBZ" });g.setNode(7,  { label: "is",        class: "type-TK" });g.setNode(8,  { label: "NP",        class: "type-NP" });g.setNode(9,  { label: "DT",        class: "type-DT" });g.setNode(10, { label: "an",        class: "type-TK" });g.setNode(11, { label: "NN",        class: "type-NN" });g.setNode(12, { label: "example",   class: "type-TK" });g.setNode(13, { label: ".",         class: "type-." });g.setNode(14, { label: "sentence",  class: "type-TK" });g.nodes().forEach(function(v) {var node = g.node(v);// Round the corners of the nodesnode.rx = node.ry = 5;});// Set up edges, no special attributes.g.setEdge(3, 4);g.setEdge(2, 3);g.setEdge(1, 2);g.setEdge(6, 7);g.setEdge(5, 6);g.setEdge(9, 10);g.setEdge(8, 9);g.setEdge(11,12);g.setEdge(8, 11);g.setEdge(5, 8);g.setEdge(1, 5);g.setEdge(13,14);g.setEdge(1, 13);g.setEdge(0, 1);// Create the renderervar render = new dagreD3.render();// Set up an SVG group so that we can translate the final graph.var svg = d3.select("svg"),svgGroup = svg.append("g");// Run the renderer. This is what draws the final graph.render(d3.select("svg g"), g);// Center the graphvar xCenterOffset = (svg.attr("width") - g.graph().width) / 2;svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");svg.attr("height", g.graph().height + 40);
</script>

该项目的demo很直接, 只需要添加Node, 然后添加每个节点的上下连接关系即可修改为自己的流程图
个人改造 Github源码地址

使用Js和H5绘制流程图相关推荐

VUE+bpmn.js+iview 页面绘制流程图
前言:业务需求需要在页面绘制流程图,之前后台的同事都是在eclipse画的流程图,为了方便点希望能在页面上画. 我用的是iview的ui框架,用原生的话记得把按钮等标签改改. 如果用的是element ...
mermaid与flowchart.js绘制流程图分支结构试验
mermaid与flowchart.js绘制流程图分支结构试验近日绘制流程图时对不断修改调整流程图中节点位置感到很厌烦,想要改用代码方式来写流程图.以下试验均基于CSDN编辑器的的mermaid和f ...
一款基于VUE的在线绘制流程图工具安装使用node.js
1.安装node.js 下载地址:https://nodejs.org/en/download/ 安装一下三项,并检查是否成功: node -v npm -v vue -V(大写的V) 一款基于VUE ...
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
html绘制流程图飞线,基于jsplumb绘制流程图
效果图 jspumb.gif 需要用到以下四个文件包 jQuery.js jquery-ui.min.css jquery-ui.min.js jquery.jsPlumb-1.6.2-min.js ...
activiti5.21 + SVG 绘制流程图高亮显示已完成节点
本功能实现是结合actitivi5.21的数据结构来获取相关数据,并通过AJAX调用进行SVG图形的绘制. 1.SpringBoot 接口及相关实体 /** * 读取组装绘制流程图的数据 */ @Re ...
Raphael绘制流程图(一)，添加可拖动的图形
原项目使用的Raphael绘制流程图,要求能自定义箭头的样式和颜色,结合从网上找到的一些资料进行修改. 1.jquery或javascript代码 var wf_r = null; //画板对象 va ...
基于 function-plot.js 开源库绘制数学函数图像实现兼文档翻译
一.前言: 前段时间移动项目想实现一个能实时绘制数学函数图像的H5小应用, app 通过 webview 进行嵌入,目前网上提供了大致有两种方法: ①.Chart.js 结合 Plugins 绘制 = ...
jQuery+d3绘制流程图
jQuery + d3绘制流程图运行效果代码 HTML代码 <!DOCTYPE html> <html style="overflow: hidden;"&g ...

使用Js和H5绘制流程图

主要使用的项目

使用Js和H5绘制流程图相关推荐

最新文章

热门文章