| <?xml version="1.0" encoding="UTF-8" standalone="no"?> | |
| <!--Created by yFiles for HTML 2.1.0.3-RC3--> | |
| <graphml xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://www.yworks.com/xml/schema/graphml.html/2.0/ygraphml.xsd " xmlns="http://graphml.graphdrawing.org/xmlns" xmlns:demostyle="http://www.yworks.com/yFilesHTML/demos/FlatDemoStyle/1.0" xmlns:bpmn="http://www.yworks.com/xml/yfiles-for-html/bpmn/2.0" xmlns:demotablestyle="http://www.yworks.com/yFilesHTML/demos/FlatDemoTableStyle/1.0" xmlns:uml="http://www.yworks.com/yFilesHTML/demos/UMLDemoStyle/1.0" xmlns:compat="http://www.yworks.com/xml/yfiles-compat-arrows/1.0" xmlns:VuejsNodeStyle="http://www.yworks.com/demos/yfiles-vuejs-node-style/1.0" xmlns:y="http://www.yworks.com/xml/yfiles-common/3.0" xmlns:x="http://www.yworks.com/xml/yfiles-common/markup/3.0" xmlns:yjs="http://www.yworks.com/xml/yfiles-for-html/2.0/xaml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> | |
| <key id="d0" for="node" attr.type="boolean" attr.name="Expanded" y:attr.ur |
Rendering this graph takes a very long time. At least on some machines more than 20 minutes.
To run on Firefox 60.0.1 (64-bit), navigate to about:config and change dom.max_script_run_time to 3600 seconds.
Open the console to see the progress.
NOTE: To see the graph when the rendering is complete, use the mouse wheel to zoom out.
Rendering this graph takes a very long time. At least on some machines more than 20 minutes.
To run on Firefox 60.0.1 (64-bit), navigate to about:config and change dom.max_script_run_time to 3600 seconds.
Open the console to see the progress.
NOTE: To see the graph when the rendering is complete, use the mouse wheel to zoom out.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="https://d3js.org/d3.v5.js"></script> | |
| <script src="https://unpkg.com/[email protected]/viz.js" type="application/javascript"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script> | |
| <div id="graph" style="text-align: center;"></div> | |
| <script> | |
| <!-- This is a (failed) attempt to inhibit stack overflow. --> | |
| Error.stackTraceLimit = Infinity |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="https://d3js.org/d3.v5.js"></script> | |
| <script src="https://unpkg.com/[email protected]/viz.js" type="application/javascript"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script> | |
| <div id="graph" style="text-align: center;"></div> | |
| <script> | |
| d3.select("#graph").graphviz(false) |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="//d3js.org/d3.v5.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script> | |
| <div id="graph" style="text-align: center;"></div> | |
| <script> | |
| dotSrc = ` |
This is a proof-of-concept of a graphical editor that allows you to to edit a Graphviz graph graphically, by drawing edges between nodes and inserting new nodes by using the mouse only. It also allows you to edit the textual DOT language description and directly see the graph transform itself into a new layout in an animated transition.
The GUI editor is perfectly usable as it is, but it has some simplifications that needs to be addressed in a production quality application in order not to hamper productivity:
Help is available by clicking the question mark in the top right corner.
This sma
| height: 800 |
Example showing bug in d3-graphviz version 1.0.1
Growing edges start growing from the wrong position when start node shape is a polygon
Edge a -> b has the problem, while edge c -> d does not.