Bower component graphviz-d3-renderer renders Graphviz source in the browser with d3.js.
Check it out on Graphviz fiddling website.
dotparser with lax mode to verify Graphviz inputdotmode for ACE editor- stage data renderer with
d3.js
DOT parser is written in PEG.js has lax mode to parse source to the end with all errors.
Graphviz is embedded in browser using viz.js.
Instead of using SVG directly it uses xdot format and parses it. Data structure of the output is drawn using
d3.js with animations during rendering.
To include it in your project simply use Bower:
bower install graphviz-d3-renderer --save
Note that it needs require.js to work. Before loading proper paths should be defined for renderer and its dependecies (d3.js and worker for require.js plugin):
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: 'js',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
d3: '/bower_components/d3/d3',
"dot-checker": '/bower_components/graphviz-d3-renderer/dist/dot-checker',
"layout-worker": '/bower_components/graphviz-d3-renderer/dist/layout-worker',
worker: '/bower_components/requirejs-web-workers/src/worker',
renderer: '/bower_components/graphviz-d3-renderer/dist/renderer'
}
});Then you can inject it into you app:
require(["renderer"],
function (renderer) {
dotSource = 'digraph xyz ...';
// initialize svg stage
renderer.init("#graph");
// update stage with new dot source
renderer.render(dotSource);
});Now you can even zoom / drag your graph
require(["renderer"],
function (renderer) {
dotSource = 'digraph xyz ...';
// initialize svg stage. Have to get a return value from renderer.init
// to properly reset the image.
zoomFunc = renderer.init({element:"#graph", extend:[0.1, 10]});
// update stage with new dot source
renderer.render(dotSource);
// for saving the image,
$('#copy-button').on('click', function(){
$('#copy-div').html(renderer.getImage({reset:true, zoomFunc:zoomFunc}));
});
// if do not need to reset the image before saving the image
$('#copy-button').on('click', function(){
$('#copy-div').html(renderer.getImage());
});
}); - Test suite using Graphviz gallery examples (50% done)
- Improve animations with path tweening and concatenation of arrow heads with arrow arcs
- Custom
viz.jscompile withxdotoutput only to optimize size
To make controlled changes you need node and grunt. When you add a new feature you must cover it with unit tests.
> grunt build testWhen everything is ready you can build also dist version (takes some time).
> grunt allCurrently project is available on LGPL so you can use it unmodified in free or commercial projects. If you add improvements to it you must share them.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent