mstefaniuk / graph-viz-d3-js Goto Github PK
View Code? Open in Web Editor NEWGraphviz web D3.js renderer
License: MIT License
Graphviz web D3.js renderer
License: MIT License
As I understand this package will (1) validate/parse a dot file, (2) compute the layout (via viz.js) to output a xdot file, and then (3) use D3 to render an SVG.
If I have already generated the xdot file with GraphViz offline, can I skip steps 1-2 and just use the render to create the SVG directly? Thanks!
This framework can respond to node mouse events? If can, how to use?
Attempt to show advent expression diagram causes "Parsing of xdot output failed"
I've got a simple testcase which breaks the dot/xdot parsers:
digraph G {
mynode [ label="Some \" quote" ];
}
This is a totally fine graph for graphviz (and viz.js), but breaks the d3 hooks.
I have a local patch that adds this as a testcase to spec/directed, but not enough experience with peg.js to suggest a fix.
Take a simple graph with a redundant edge, such as
digraph {
x -> y;
x -> y;
}
and delete the second x -> y
edge. It'll leave a "zombie" edge in the UI that you can't get rid of.
I've started to adapt graph-viz-d3-js to D3 version 4.7.4. I will send you a pull request when I'm done.
If you want to do it yourself or have some reason why it shouldn't be done, please stop me soon, before I've put too much work into it.
It would be awesome if this were published to NPM!
This might be a silly question. But is it possible to save an image that has special characters like "λ"?
Currently, it gives you this error:
InvalidCharacterError: String contains an invalid character
My webpack.config.js:
...
resolve: {
modulesDirectories: ['node_modules','bower_components'],
},
plugins:[
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json",["d3","dot-checker","layout-worker","worker","renderer"])
)
],
paths: {
es6: '/node_modules/requirejs-babel/es6',
babel: '/node_modules/requirejs-babel/babel-5.8.22.min',
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',
}
...
My main.js:
require(["renderer"], function (renderer) { dotSource = 'XXXXXX'; // initialize svg stage renderer.init("#graph"); // update stage with new dot source renderer.render(dotSource); });
I receive an error:
Module not found: Error: Cannot resolve module 'renderer' in XXX
renderer1.init({element: "#graph", zoom: {extent: [0.1, 10]}});
In renderer.js
, main = svg.append('g')
can be changed to main = svg.append('g').append('g')
, so that one can use d3.behavior to zoom/drag the graph properly. Example code can be found on my fork.
can you use html tags like <img>
Example shown on http://graphviz.it/#/ahoweSmq
Uncaught TypeError: Failed to construct 'Worker': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
Sorry to trouble you with newbie questions all the time. Really appreciate your help.
I get the above error message when testing this:
magjac-testing-graphviz-d3-renderer.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="bower_components/requirejs/require.js" data-main="main.js"></script>
</head>
<body>
<h1>magjac testing graphviz-d3-renderer</h1>
</body>
</html>
main.js:
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',
}
});
require(["renderer"],
function (renderer) {
dotSource = 'digraph xyz { a -> b }';
// initialize svg stage
renderer.init("#graph");
// update stage with new dot source
renderer.render(dotSource);
});
Steps to reproduce:
Render a graph with dot1.txt. Re-render with dot2.txt.
The result is:
The text is both in the old and the new place. The text left behind is the second table cell in that table row.
Tested on http://graphviz.it and with my own application.
Tested with Firefox 48.0 and Chrome Version 57.0.2987.110 (64-bit) on Ubuntu 14.04.
It's the same behavior on all of them.
The following DOT code does not render any node label:
digraph G { "Test" [label = "hello\\world"] }
The output is:
Inspecting the generated svg shows no text node:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.12 44" height="44pt" width="119.12pt">
<style type="text/css">.dashed {stroke-dasharray: 5,5} .dotted {stroke-dasharray: 1,5} .overlay {fill: none; pointer-events: all}</style>
<g>
<g transform="translate(4,40)">
<polygon stroke="#fffffe" stroke-opacity="0" fill="#ffffff" points="-4,4 -4,-44 119.12,-44 119.12,4"></polygon>
<g class="node">
<title>Test</title>
<path stroke="#000000" fill="none" d="M 55.56,-18 m -55.62,0 a 55.62,18 0 1,0 111.24,0 a 55.62,18 0 1,0 -111.24,0"></path>
</g>
</g>
</g>
</svg>
It works with Graphviz:
$ echo 'digraph G { "Test" [label = "hello\\world"] }' | dot -Tsvg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.36.0 (20140111.2315)
-->
<!-- Title: G Pages: 1 -->
<svg width="110pt" height="44pt"
viewBox="0.00 0.00 110.00 44.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 40)">
<title>G</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-40 106,-40 106,4 -4,4"/>
<!-- Test -->
<g id="node1" class="node"><title>Test</title>
<ellipse fill="none" stroke="black" cx="51" cy="-18" rx="51.0191" ry="18"/>
<text text-anchor="middle" x="51" y="-14.3" font-family="Times,serif" font-size="14.00">hello\world</text>
</g>
</g>
</svg>
hello.Which d3 version?
require(["renderer"],
function (renderer) {
// initialize first svg stage
zoomFunc = renderer.init({element:"#dot1});
// update stage with new dot source
renderer.render({source:dot1, labelAttributer: myLabelAttributer, callBack:callback});
});
require(["renderer"],
function (renderer) {
// initialize second svg stage
zoomFunc = renderer.init({element:"#dot2"});
// update stage with new dot source
renderer.render({source:dot2, labelAttributer: myLabelAttributer, callBack:callback});
});
This will end up only dot2
got shown on the page.
Is there a way to display two dot graphs on a page at the same time?
Hi,
I wonder where exactly the diagram is generated from? the server or the browser?
Thanks.
Try the following code sample at both http://graphviz.it/ and https://mdaines.github.io/viz.js/
On http://graphviz.it/, the fontcolor, URL, and tooltip attrs do not work.
digraph G {
G[
label="google.com"
shape=box
URL="http://google.com"
tooltip="Click me!"
style="filled"
fillcolor="#5cb85c"
color="#5cb85c"
fontcolor="#ffffff"
];
D[
label="asdf"
shape=box
];
A[
label="asdf"
shape=box
];
P[
label="asdf"
shape=box
];
L[
label="asdf"
shape=box
];
G -> A;
A -> P;
A -> D;
A -> L;
P -> L;
D -> L;
}
This project sounds great, but while the "Usage" section may be obvious to a bower/require/D3 veteran, I'm mystified. It'd be great if you could clarify some of the below questions!
Where should the following JSON be stored (and why)? Are the paths generally useful or should they be modified in every project? I was considering a .bowerrc
with "directory": "src/components"
or similar - would it be simple to change the paths to that configuration? Does these path need to be specified before doing bower install graphviz-d3-renderer --save
?
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'
}
Also: Could you list the scripts loaded before the JS code beginning with require(["renderer"]
? Or even better, put a working JS/HTML example in the repo?
The strict example from http://www.graphviz.org/content/dot-language fails:
strict graph {
a -- b
a -- b
b -- a [color=blue]
}
Example table.gv
from Graphviz gallery should be a reference.
Tried coveralls and got the following problem:
node_modules/.bin/grunt coveralls
Running "coveralls:firefox" (coveralls) task
>> Failed to submit 'karma/lcov.info' to coveralls: Bad response: 422 {"message":"Couldn't find a repository matching this job.","error":true}
>> WARNING: Failed to submit coverage results to coveralls
Done, without errors.
I looked at https://github.com/nickmerwin/node-coveralls#usage:
If you're running locally, you must have a .coveralls.yml file, as documented in their documentation, with your repo_token in it; or, you must provide a COVERALLS_REPO_TOKEN environment-variable on the command-line.
But I can't find that file or any token to set.
I want to access the "transform" attribute of the second level g element in the svg, but it is not available immediately after calling renderer.render(). I tried to use the renderer.renderHandler() callback, but it fires before the attributes are available.
Is this intentionally? If so, is there some other way to know when the rendering is finished?
Below is my log file. It shows the following timeline:
19:13:14.207: rendering starts
19:13:14.583: callback fires
19:13:14.658: renderer, stage & layout-worker have all returned, but the attributes are not available yet
19:13:14.762: attributes becomes available
19:13:15.494: attributes are stable (D3 animation has finished)
Full log file:
magjac d3 200: running renderer.init(), element = #graph renderer.js:460:7
Wait 3 seconds and then Call renderSVG(), t = 19:13:11.199 jira-dependency-graph.js:76:5
TypeError: asm.js type error: incompatible type for argument 5: (i32 here vs. f64 before) layout-worker.js:3243:60
magjac d3 720: transformer init posting "ready" message layout-worker.js:6565:5
magjac d3 200: running renderer event handler, event = ready renderer.js:438:5
magjac d3 200: returning from renderer event handler, event = ready renderer.js:455:5
magjac d3 730: transformer init posted "ready" message layout-worker.js:6569:5
magjac 008: running renderSVG, t = 19:13:14.200 jira-dependency-graph.js:81:5
magjac 010: calling insertSVGfromDOT, t = 19:13:14.201 jira-dependency-graph.js:82:5
magjac 300: insertSVGfromDOT jira-dependency-graph.js:834:5
magjac 444: Calling renderer.render(dotSrc), t = 19:13:14.207 jira-dependency-graph.js:846:5
magjac d3 200: running renderer.render() renderer.js:465:7
magjac d3 200: returning from renderer.render() renderer.js:471:7
magjac 115: jira-dependency-graph.js:849:5
magjac 020: returned from insertSVGfromDOT t = 19:13:14.208 jira-dependency-graph.js:85:5
magjac 123: t = 19:13:14.209 svg g g attributes = NamedNodeMap [ ] jira-dependency-graph.js:98:5
magjac 030: returned from logAttr t = 19:13:14.211 jira-dependency-graph.js:88:5
magjac d3 700: layout-worker onmessage, event = [object MessageEvent] layout-worker.js:6542:7
magjac d3 705: layout-worker onmessage, calling transformer.generate() layout-worker.js:6544:9
magjac 123: t = 19:13:14.352 svg g g attributes = NamedNodeMap [ ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:14.453 svg g g attributes = NamedNodeMap [ ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:14.555 svg g g attributes = NamedNodeMap [ ] jira-dependency-graph.js:98:5
magjac d3 710: layout-worker onmessage, returned from transformer.generate() layout-worker.js:6547:9
magjac d3 710: layout-worker onmessage, posting "stage" massage layout-worker.js:6550:9
magjac d3 200: running renderer event handler, event = stage renderer.js:438:5
magjac d3 200: running stage.draw() renderer.js:264:9
magjac d3 290: returning from stage.draw() renderer.js:378:9
magjac 122: t = 19:13:14.583 running rendererCallback jira-dependency-graph.js:92:5
magjac d3 200: returning from renderer event handler, event = stage renderer.js:455:5
magjac d3 710: layout-worker onmessage, posted "stage" massage layout-worker.js:6555:9
magjac d3 715: layout-worker onmessage returning layout-worker.js:6562:7
magjac 123: t = 19:13:14.658 svg g g attributes = NamedNodeMap [ ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:14.762 svg g g attributes = NamedNodeMap [ transform="translate(0.0013896676384839645,0.1410512653061224)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:14.871 svg g g attributes = NamedNodeMap [ transform="translate(0.14517252478134113,14.735011265306124)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:14.973 svg g g attributes = NamedNodeMap [ transform="translate(0.694434332361516,70.48508473469387)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.074 svg g g attributes = NamedNodeMap [ transform="translate(1.9490109854227406,197.82461502040817)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.177 svg g g attributes = NamedNodeMap [ transform="translate(3.2711370262390673,332.02040816326536)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.279 svg g g attributes = NamedNodeMap [ transform="translate(3.8456933411078733,390.33787412244914)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.392 svg g g attributes = NamedNodeMap [ transform="translate(3.9979999999999976,405.79699999999974)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.494 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.595 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.696 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.804 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:15.906 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.008 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.109 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.210 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.312 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.413 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.523 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.624 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.757 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:16.885 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:17.042 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:17.170 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:17.296 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
magjac 123: t = 19:13:17.412 svg g g attributes = NamedNodeMap [ transform="translate(4,406)" ] jira-dependency-graph.js:98:5
Hello! In my application, I need to change arrowtype dynamically from normal to none and vice versa. However after changing it, the arrowhead still exists.
I am running Firefox 53.0.3 (64-bit) on Mac Sierrra 10.12.4
Steps to reproduce:
digraph G {A -> B [arrowhead=normal]}
then
digraph G {A -> B [arrowhead=none]}
Second (related) issue:
Changing arrowtype to dot does not erase the old arrow, and the dot seems to be permanently added to the edge. This case is particular for dot.
Steps to reproduce:
digraph G {A -> B [arrowhead=normal]}
then
digraph G {A -> B [arrowhead=dot]}
then
digraph G {A -> B [arrowhead=crow]}
There are some errors in the Readme page:
paths
should also include renderer
require
block (at the bottom of the code)This works:
digraph G { "Test" [label = <hello world>] }
This does not:
digraph G { "Test" [label = <hello, world>] }
I guess it's somewhere here support for this must be added, but I don't know how.
I understand the desire for people to contribute code back to this project, but the use of a [L]GPL license means that some larger, more conservative, companies won't use it at all and therefore won't be able to contribute back. Any thoughts on an Apache or MIT/BSD flavored license?
First, thanks for this awesome project - it's exactly what I was looking for
I'm having troubles understanding how to execute a function after a chart has been rendered. I've been trying callbacks (e.g. below) and promises, but it doesn't seem to work.
renderer.render(dotSource, function (err, resp) { if(!err) { postRender(); } });
Hello, I ma using Graph-viz-d3-js to render graphs. My graph comes from Graphviz tool, and are all in DOT format.
The graph render well, except the image doesn't appear. This is an important part of the graph and cannot be left out. I tried to specify path, real and relative but nothing work. Anyone came across this problem before?
Here is a sample of the graph code source:
digraph "" {
graph [layout=dot;]
imagepath="C:\skin";
rankdir = LR; ranksep = 0.5
'node[shape = "box", color = "grey", style = "dashed", fontsize = 8, fontname = "verdana", image = "cube24.png", labelloc = b, weight = 3, height = 0.7]"8d413b9c-f283-4562-8df2-9e65eafecc46"[label="PL" tooltip="PL: The PL cube is used to generate the companys profit and loss statements down to cost centre level. It is also used for planning and forecasting at the account level.", URL="qdlink/1712aff7-04b1-466e-a81b-f59cf22d6e72/model/cube/8d413b9c-f283-4562-8df2-9e65eafecc46"];\n'+
'node[shape = "box", color = "grey", style = "dashed", fontsize = 8, fontname = "verdana", image = "cube24.png", labelloc = b, weight = 3, height = 0.7]"8d413b9c-f283-4562-8df2-9e65eafecc46"[label="PL" tooltip="PL: The PL cube is used to generate the companys profit and loss statements down to cost centre level. It is also used for planning and forecasting at the account level.", URL="qdlink/1712aff7-04b1-466e-a81b-f59cf22d6e72/model/cube/8d413b9c-f283-4562-8df2-9e65eafecc46"];\n'+
'node[box = "white", shape = "ellipse", color = "white", style = "unfilled", fontsize = 8, fontname = "verdana", image = "cube24.png", labelloc = b]"a647b9b9-95cd-484f-a8d7-fe111fefe936"[label="Assets" tooltip="Assets: My assets cube is used for abc", URL="qdlink/1712aff7-04b1-466e-a81b-f59cf22d6e72/model/cube/a647b9b9-95cd-484f-a8d7-fe111fefe936"];\n'+
'node[box = "white", shape = "ellipse", color = "white", style = "unfilled", fontsize = 8, fontname = "verdana", image = "cube24.png", labelloc = b]"6a531d7a-f9ed-491a-b9ba-0d67ae2e60ae"[label="zDates" tooltip="zDates: The zDates cube is a system cube that contains date logic used for phasing annual amounts.", URL="qdlink/1712aff7-04b1-466e-a81b-f59cf22d6e72/model/cube/6a531d7a-f9ed-491a-b9ba-0d67ae2e60ae"];\n'+
'node[box = "white", shape = "ellipse", color = "white", style = "unfilled", fontsize = 8, fontname = "verdana", image = "cube24.png", labelloc = b]"e828baa4-6432-47b5-918c-03a1994deaf8"[label="Assumptions" tooltip="Assumptions: The Assumptions cube contains all of the assumptions that are used in the model, including system assumptions.", URL="qdlink/1712aff7-04b1-466e-a81b-f59cf22d6e72/model/cube/e828baa4-6432-47b5-918c-03a1994deaf8"];\n'+
'node[box = "white", shape = "ellipse", color = "white", style = "unfilled", fontsize = 8, fontname = "verdana", image = "cube24.png", labelloc = b]"8333aed6-6346-4b8c-968e-79523d8798c9"[label="Travel" tooltip="Travel: The Travel cube models travel expenditure based on the number of nights away and standard rates per destination / travel category. Other expenses such as rental are also modelled.", URL="qdlink/1712aff7-04b1-466e-a81b-f59cf22d6e72/model/cube/8333aed6-6346-4b8c-968e-79523d8798c9"];\n'+
'node[box = "white", shape = "ellipse", color = "white", style = "unfilled", fontsize = 8, fontname = "verdana", image = "cube24.png", labelloc = b]"1f65c1fc-f2c0-4614-aded-a0e94a5e6baf"[label="KPI" tooltip="KPI: The KPIs cube is used to monitor company performance.", URL="qdlink/1712aff7-04b1-466e-a81b-f59cf22d6e72/model/cube/1f65c1fc-f2c0-4614-aded-a0e94a5e6baf"];\n'+
Thanks for your help.
Instead of default TimesNewRoman.
Hello,
How can I render a node tooltip (or add an event onclick to nodes)?
Thanks for the job!
Ely
I'm trying to render relatively large graph (this one; 16K). It renders fine with dot
, but graph-viz-d3
doesn't render anything, and prints no errors to the console.
While developing/debugging, it would be nice to have shorter iterations that the one minute it takes to "grunt dist". I tried "grunt build" and used:
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: '/bower_components/graphviz-d3-renderer/src/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/src/js/dot-checker',
"layout-worker": '/bower_components/graphviz-d3-renderer/src/js/layout-worker',
worker: '/bower_components/requirejs-web-workers/src/worker',
renderer: '/bower_components/graphviz-d3-renderer/src/js/renderer'
}
});
But in Chrome Version 57.0.2987.110 (64-bit) on Ubuntu 14.04, I get:
layout-worker.js:18 Uncaught DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': TypeError: viz is not a function could not be cloned.
at onmessage (http://madrox.netinsight.se:8084/bower_components/graphviz-d3-renderer/src/js/layout-worker.js:18:9)
layout-worker.js:18 Uncaught DataCloneError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': TypeError: viz is not a function could not be cloned.
And with Firefox 48.0 on Ubuntu 14.04, I get:
DataCloneError: The object could not be cloned.layout-worker.js:18
Is there a better way? graphviz.it has "grunt development", but not graph-viz-d3-js
See DOT below. If the last line //"SAND-44" -> "SAND-29" is uncommented, edges are redrawn, but not the nodes which causes the edges to point to the wrong places.
Related to mstefaniuk/graphviz.it#14 ?
// Dependencies for [u'SAND-49', u'SAND-48', u'SAND-44', u'SAND-34', u'SAND-30', u'SAND-29', u'SAND-28', u'SAND-26', u'SAND-25', u'SAND-24']
strict digraph {
graph [fontsize=20.0 labelloc=t rankdir=BT tooltip="Drag here to pan"]
node [fontname="Liberation Sans" fontsize=14 margin=0 shape=box style=filled tooltip="Click to go to \N in Jira"]
"SAND-28" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >The Jacobssons are destroying a sand castle</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-28</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-28" color="#000000" fillcolor="#4a6785" fontcolor="#ffffff" shape=plaintext style=filled]
"SAND-28" -> "SAND-30" [tooltip="There is no sand castle now... (SAND-30)
⬆
The Jacobssons are destroying a sand castle (SAND-28)"]
"SAND-29" -> "SAND-28" [tooltip="The Jacobssons are destroying a sand castle (SAND-28)
⬆
The sand castle is complete! (SAND-29)"]
"SAND-29" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >The sand castle is complete!</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-29</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-29" color="#000000" fillcolor="#4a6785" fontcolor="#ffffff" shape=plaintext style=filled]
"SAND-29" -> "SAND-28" [tooltip="The Jacobssons are destroying a sand castle (SAND-28)
⬆
The sand castle is complete! (SAND-29)"]
"SAND-29" -> "SAND-30" [tooltip="There is no sand castle now... (SAND-30)
⬆
The sand castle is complete! (SAND-29)"]
"SAND-26" -> "SAND-29" [tooltip="The sand castle is complete! (SAND-29)
⬆
The Jacobssons are building a sand castle (SAND-26)"]
"SAND-34" -> "SAND-29" [tooltip="The sand castle is complete! (SAND-29)
⬆
? (SAND-34)"]
"SAND-34" [label="?" URL="https://netinsight.atlassian.net/browse/SAND-34" color="#000000" fillcolor="#d04437" fontcolor="#ffffff" shape=circle style=filled]
"SAND-34" -> "SAND-29" [tooltip="The sand castle is complete! (SAND-29)
⬆
? (SAND-34)"]
"SAND-26" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >The Jacobssons are building a sand castle</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-26</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-26" color="#000000" fillcolor="#4a6785" fontcolor="#ffffff" shape=plaintext style=filled]
"SAND-26" -> "SAND-29" [tooltip="The sand castle is complete! (SAND-29)
⬆
The Jacobssons are building a sand castle (SAND-26)"]
"SAND-24" -> "SAND-26" [tooltip="The Jacobssons are building a sand castle (SAND-26)
⬆
Papsi plays in the Sandbox (SAND-24)"]
"SAND-25" -> "SAND-26" [tooltip="The Jacobssons are building a sand castle (SAND-26)
⬆
Sofia plays in the Sandbox (SAND-25)"]
"SAND-30" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >There is no sand castle now...</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-30</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-30" color="#000000" fillcolor="#4a6785" fontcolor="#ffffff" shape=plaintext style=filled]
"SAND-28" -> "SAND-30" [tooltip="There is no sand castle now... (SAND-30)
⬆
The Jacobssons are destroying a sand castle (SAND-28)"]
"SAND-29" -> "SAND-30" [tooltip="There is no sand castle now... (SAND-30)
⬆
The sand castle is complete! (SAND-29)"]
"SAND-24" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >Papsi plays in the Sandbox</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-24</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-24" color="#000000" fillcolor="#f6c342" fontcolor="#000000" shape=plaintext style=filled]
"SAND-24" -> "SAND-26" [tooltip="The Jacobssons are building a sand castle (SAND-26)
⬆
Papsi plays in the Sandbox (SAND-24)"]
"SAND-25" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >Sofia plays in the Sandbox</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-25</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-25" color="#000000" fillcolor="#14892c" fontcolor="#ffffff" shape=plaintext style=filled]
"SAND-44" -> "SAND-25"
"SAND-25" -> "SAND-26" [tooltip="The Jacobssons are building a sand castle (SAND-26)
⬆
Sofia plays in the Sandbox (SAND-25)"]
"SAND-48" -> "SAND-25" [tooltip="Sofia plays in the Sandbox (SAND-25)
⬆
Sofia has entered the building (SAND-48)"]
"SAND-48" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >Sofia has entered the building</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-48</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-48" color="#000000" fillcolor="#14892c" fontcolor="#ffffff" shape=plaintext style=filled]
"SAND-49" -> "SAND-48"
"SAND-48" -> "SAND-25" [tooltip="Sofia plays in the Sandbox (SAND-25)
⬆
Sofia has entered the building (SAND-48)"]
"SAND-49" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >Travel with papsi</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-49</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-49" color="#000000" fillcolor="#14892c" fontcolor="#ffffff" shape=plaintext style=filled]
"SAND-44" [label=< <TABLE ALIGN="LEFT" BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2"> <TR><TD COLSPAN="2" BALIGN="LEFT" ALIGN="LEFT" >Get Sofia a Linux account</TD></TR><TR><TD ALIGN="LEFT" BALIGN="LEFT" ><FONT POINT-SIZE="8">Sofia</FONT></TD><TD ALIGN="RIGHT" VALIGN="BOTTOM"><FONT POINT-SIZE="8">SAND-44</FONT></TD></TR> </TABLE> > URL="https://netinsight.atlassian.net/browse/SAND-44" color="#000000" fillcolor="#14892c" fontcolor="#ffffff" shape=plaintext style=filled]
//"SAND-44" -> "SAND-29"
}
Hello
The library is very good, it works fine. But i can't find now how to clean the canvas to render a new graph. Right now the new graph is added to the right.
That's all
Best regards°!
The tooltips in sofia.txt are not rendered. No "a xlink:title" for the tooltips are generated in the svg.
This is the rendered html from http://graphviz.it:
Graphviz it! - fiddle with diagrams.html.txt
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.