Viz实现GraphViz的流程图配置效果代码
代码语言:html
所属分类:图表
代码描述:Viz实现GraphViz的流程图配置效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html,body{ background-color: #e6e9e8 } #graphViz{ display: inline; position: absolute; top:0; left:125px; } #orientationTitle, #dataTitle{ font-weight: bold; border-bottom: thin solid black; width: fit-content; padding-right:5px; margin-bottom:5px; } #controls{ height: 100px; width:100px; padding-bottom: 5px; z-index:2; } #dataSelector{ margin-bottom: 20px; z-index:2; } #controls .radioBtn{ display:block; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/viz.1.8.1.js"></script> <div id="dataSelector"> <div id="dataTitle">Data Set:</div> <select id="dataSelect"> <option value="simpleEx">Simple Example</option> <option value="twoEndStates">Two End States</option> </select> </div> <div id="controls"> <div id="orientationTitle">Orientation:</div> <div className="radioBtn"> <input type="radio" name="orient" checked value="BT"> <label for="BT"><span></span>Up</label> </div> <div className="radioBtn"> <input type="radio" name="orient" value="TB"> <label for="grid"><span></span>Down</label> </div> <div className="radioBtn"> <input type="radio" name="orient" value="RL" id="cose"> <label for="cose"><span></span>Left</label> </div> <div className="radioBtn"> <input type="radio" name="orient" value="LR"> <label for="concentric"><span></span>Right</label> </div> </div> <div id="graphViz"> </div> <script > const data = { simpleEx: [ { "Child": "Attacker", "Parent": "Get a Shovel" }, { "Child": "Get a Shovel", "Parent": "Tunnel Under the Moat" }, { "Child": "Tunnel Under the Moat", "Parent": "Surface in the Courtyard" }, { "Child": "Surface in the Courtyard", "Parent": "Descend to the Treasure Room" }, { "Child": "Tunnel Under the Moat", "Parent": "Tunnel to the Treasure Room" }, { "Child": "Descend to the Treasure Room", "Parent": "Steal Guard's Keys" }, { "Child": "Steal Guard's Keys", "Parent": "Enter the Treasure Room" }, { "Child": "Descend to the Treasure Room", "Parent": "Pick the Lock" }, { "Child": "Attacker", "Parent": "Get a Rope" }, { "Child": "Get a Rope", "Parent": "Scale the Castle Wall" }, { "Child": "Scale the Castle Wall", "Parent": "Descend to the Treasure Room" }, { "Child": "Tunnel to the Treasure Room", "Parent": "Steal the Jewels" }, { "Child": "Pick the Lock", "Parent": "Enter the Treasure Room" }, { "Child": "Enter the Treasure Room", "Parent": "Steal the Jewels" }], twoEndStates: [ { "Child": "Attacker", "Parent": "Get a Shovel" }, { "Child": "Get a Shovel", "Parent": "Tunnel Under the Moat" }, { "Child": "Tunnel Under the Moat", "Parent": "Surface in the Courtyard" }, { "Child": "Surface in the Courtyard", "Parent": "Descend to the Treasure Room" }, { "Child": "Tunnel Under the Moat", "Parent": "Tunnel to the Treasure Room" }, { "Child": "Descend to the Treasure Room", "Parent": "Steal Guard's K.........完整代码请登录后点击上方下载按钮下载查看
网友评论0