dagrejs / graphlib-dot Goto Github PK

Would be cool to see a live demo (possibly in the gh-pages branch so you could access it at http://cpettitt.github.io/graphlib-dot )

Hi!

I have a problem with graphlib-dot (mostly just starting…) because it absolutely ignores any styling.

Input: https://github.com/mirabilos/TC3conv/blob/master/experiments/d.htm

Expected output: https://github.com/mirabilos/TC3conv/blob/master/experiments/d.png

Actual output: boxen (not so bad), and all colour information is ignored (very bad). Please advice how I can fix this.

Since lib/version is generated from grunt before publishing,
and isn't checked in then installing a fork from git is impossible.
because it will error as above.

There are a bunch of solutions to this problem, but all of them are ugly.
you could use a post install hook, but that would require using grunt as a normal dependency.

The better options are either to check in lib/version, or leave it out entirely.
(I'd lean towards leaving it out)

Personally, I think using grunt within a module is overkill,
but this isn't my module, so that is up to you.

In graphviz, the following are equivalent

digraph g {
  subgraph cluster_SG { a -> b}
  a -> c
}

digraph g {
  a -> b
  subgraph cluster_SG { a b }
  a -> c
}

In other words, a node doesn't have to be first declared within a subgraph to be a member of the subgraph; it can be "pulled into" a subgraph by declaring it again within the subgraph.

However, parsing the second example with graphlib-dot, cluster_SG doesn't get declared at all, and a and b are children of the top-level graph. I haven't looked into the code yet, but it seems that the later declarations are ignored, and the subgraph ends up empty and is discarded.

I know the dagre clustering implementation is incomplete, but I hope to read the files anyway, in order to draw the clusters using other algorithms.

I hope to take a look into fixing this, but wanted to post an issue first in case anyone has any clues about this. Thanks!

Graphviz doesn't render subgraphs unless their name begins with cluster

http://stackoverflow.com/questions/2012036/graphviz-how-to-connect-subgraphs

The quick fix would be to change https://github.com/cpettitt/graphlib-dot/blob/master/lib/write-one.js#L43 to:

writer.writeLine("subgraph cluster" + id(w) + " {");

I see that it's possible to set default graph attributes in the generated graphviz code by calling setGraph():

const graph = new Graph()
graph.setGraph({rankdir: 'LR'})
dot.write(graph)

Results in:

strict digraph {
  rankdir=LR;
}

I'd like to do the same for default node attributes in the generated graphviz code. I've found that creating a node called "node" will do the trick:

const graph = new Graph()
graph.setNode('node', { shape: 'box' })

Results in:

strict digraph {
  node [shape=box]
}

But, of course, it also creates an extra node named "node" in the graph as seen by graphlib.

Can the same be achieved without creating that node?

@cpettitt Current version is still using old version of graphlib

I have 8 or more graphs in one file, when I try to read the file shows me that:

"SyntaxError: Expected comment, end of input or whitespace but "#" found.

My dot file example:

graph "21" {
graph [bgcolor="transparent"]
Node_0 [label="N"];
Node_1 [label="N"];
Node_2 [label="C"];
Node_3 [label="C"];
Node_4 [label="C"];
Node_4 -- Node_0 [label="1"];
Node_2 -- Node_1 [label="1"];
Node_3 -- Node_2 [label="1"];
Node_4 -- Node_3 [label="1"];
}# => 2[1 HMDB00001 ,2 HMDB00002]
graph "22" {
graph [bgcolor="transparent"]
Node_0 [label="N"];
Node_1 [label="C"];
Node_2 [label="C"];
Node_3 [label="C"];
Node_1 -- Node_0 [label="1"];
Node_2 -- Node_1 [label="1"];
Node_3 -- Node_2 [label="1"];
}# => 2[1 HMDB00001 ,2 HMDB00002]
graph "23" {
graph [bgcolor="transparent"]
Node_0 [label="C"];
Node_1 [label="C"];
Node_2 [label="C"];
Node_1 -- Node_0 [label="1"];
Node_2 -- Node_1 [label="1"];
}

I have tried with this code:

var fs = require('fs')
var dot = require('graphlib-dot')

var graph = dot.read(fs.readFileSync('p_out.dot', 'UTF-8'));

Hi,

Because of recent changes to graphlib-dot to handle compound graphs,
uncompound graphs where broken.

I made a quick change to get it working for me, and I meant to make a pull request,
but since I originally owned this module and transferred it to you,
I ended up pushing directly to the repo.

The tests pass and stuff, but I don't like doing that, because git hub never notifies other collaborators on push so it can be a surprise to see new commits.

Here is the commit:

55dafff

If you approve, can you publish 0.4.9 ?
Also I noticed that 0.4.8 is not on npm.

Trying to load a dot file in through nodejs and having issues parsing the file. The error output is:

    at parse_whitespace (/Users/foo/bar/node_modules/graphlib-dot/lib/dot-grammar.js:2111:37)
    at parse__ (/Users/foo/bar/node_modules/graphlib-dot/lib/dot-grammar.js:2321:19)
    at Object.parse_graphStmt [as graphStmt] (/Users/foo/bar/node_modules/graphlib-dot/lib/dot-grammar.js:147:19)
    at Object.module.exports.result.parse (/Users/foo/bar/node_modules/graphlib-dot/lib/dot-grammar.js:2389:45)
    at Object.parse (/Users/foo/bar/node_modules/graphlib-dot/lib/parse.js:20:30)
    at repl:1:14
    at REPLServer.self.eval (repl.js:110:21)
    at Interface.<anonymous> (repl.js:239:12)
    at Interface.EventEmitter.emit (events.js:95:17)
    at Interface._onLine (readline.js:202:10)

and the file looks like (only a portion of the dot file, hopefully enough for debugging):

digraph Tree {
    graph [bb="0,0,1222,622"];
    node [label="\N"];
    0    [height=0.81111,
        label="X[0] <= 1.7005\ngini = 0.5\nsamples = 200",
        pos="727,593",
        shape=box,
        width=1.4286];
    1    [height=0.81111,
        label="X[1] <= 1.6060\ngini = 0.299444444444\nsamples = 120",
        pos="621,499",
        shape=box,
        width=2.0359];
    0 -> 1   [pos="e,653.74,528.42 694.33,563.65 683.95,554.64 672.35,544.57 661.49,535.14"];
    24   [height=0.81111,
        label="X[1] <= 0.9833\ngini = 0.04875\nsamples = 80",
        pos="834,499",
        shape=box,
        width=1.4286];
    0 -> 24  [pos="e,800.95,528.42 759.98,563.65 770.45,554.64 782.16,544.57 793.13,535.14"];
    2    [height=0.81111,
        label="X[0] <= 1.5087\ngini = 0.0429899770559\nsamples = 91",
        pos="370,405",
        shape=box,
        width=2.1401];
    1 -> 2   [pos="e,447.1,434.26 547.39,471.02 518.93,460.59 486.16,448.58 456.58,437.74"];
    11   [height=0.81111,
        label="X[0] <= 0.8326\ngini = 0.428061831153\nsamples = 29",
        pos="621,405",
        shape=box,
        width=2.0324];
    1 -> 11  [pos="e,621,434.42 621,469.65 621,461.69 621,452.9 621,444.46"];
    3    [height=0.81111,
        label="X[1] <= 1.3855\ngini = 0.0240928019036\nsamples = 82",
        pos="201,311",
        shape=box,
        width=2.1401];
    2 -> 3   [pos="e,252.91,340.26 317.92,375.65 300.16,365.98 280.16,355.09 261.79,345.09"];
    8    [height=0.81111,
        label="X[0] <= 1.5412\ngini = 0.197530864198\nsamples = 9",
        pos="370,311",
        shape=box,
        width=2.0359];
    2 -> 8   [pos="e,370,340.42 370,375.65 370,367.69 370,358.9 370,350.46"];
    4    [height=0.81111,
        label="gini = 0.0000\nsamples = 63\nvalue = [ 63.   0.]",
        pos="56,217",
        shape=box,
        width=1.5593];
    3 -> 4   [pos="e,100.79,246.42 156.31,281.65 141.57,272.29 125.01,261.79 109.66,252.05"];
}

When I include the library together with RequireJS like the following in an HTML page I get the error and stack trace below:

<script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js'></script>
<script>
  require(['http://cpettitt.github.io/project/graphlib-dot/latest/graphlib-dot.js'], function(dot) {
    console.log(dot);
  });
</script>

Uncaught TypeError: Cannot read property 'Graph' of undefined
  3../graphlib @ graphlib-dot.js:55
  s @ graphlib-dot.js:1
  (anonymous function) @ graphlib-dot.js:1
  8../build-graph @ graphlib-dot.js:2619
  s @ graphlib-dot.js:1
  (anonymous function) @ graphlib-dot.js:1
  2../lib/graphlib @ graphlib-dot.js:28
  s @ graphlib-dot.js:1
  (anonymous function) @ graphlib-dot.js:1
  (anonymous function) @ graphlib-dot.js:24
  1../index @ graphlib-dot.js:26
  s @ graphlib-dot.js:1e @ graphlib-dot.js:1
  (anonymous function) @ graphlib-dot.js:1

What do I need to do to make graphlib-dot work with RequireJS (which is a requirement)?

I found a bug in the dot parser in dagre: dagrejs/dagre@65cb9f4

Update lodash >=4.17.5

All the examples listed are assuming a use with node.js - but there's a release download for use in a website. Just no hint on how to initialize or use the library that way.

With the following input:

graph {
    rankdir=LR;
    a -- { b c d }; b -- { c e }; c -- { e f }; d -- { f g }; e -- h;
    f -- { h i j g }; g -- k; h -- { o l }; i -- { l m j }; j -- { m n k };
    k -- { n r }; l -- { o m }; m -- { o p n }; n -- { q r };
    o -- { s p }; p -- { s t q }; q -- { t r }; r -- t; s -- z; t -- z;
    { rank=same; b, c, d }
    { rank=same; e, f, g }
    { rank=same; h, i, j, k }
    { rank=same; l, m, n }
    { rank=same; o, p, q, r }
    { rank=same; s, t }
}

graphlib-dot does not seem to be able to parse it and instead throws Expected "--", "->", ":", ";", "=", "[", "edge", "graph", "node", "subgraph", "{", "}", comment, identifier or whitespace but "," found..

But it should work:

Using this API I would like to connect clusters of clusters to each other. Simply, how can I generate a graph with compound=true; property and edges like a0->a1 [ltail=cluster0,lhead=cluster1];? My intended output is something like...

digraph g{
compound=true;

subgraph cluster0{
label="Cluster 0";
a0->b0;
b0->c0;
}

subgraph cluster1{
label="Cluster 1";
a1->b1;
b1->c1;
}

subgraph cluster2{
label="Cluster 2";
a2->b2;
b2->c2;
}

a0->a1 [ltail=cluster0,lhead=cluster1];
a0->a2 [ltail=cluster0,lhead=cluster2];

}

Current graphlib version uses lodash version with security issues.
The lodash version in this project needs to be fixed too as mentioned in #38.

Would be nice to have Graphlib-dot (and Graphlib) available as Bower package when 1.0 is ready. 😃

Currently rankdir doesn't get attached to the graph object in graphlib-dot, but it does with graphviz:

digraph {
    graph [rankdir=LR];

    X -> Y;
    Y -> X;
    Y -> Z;
    Z -> Y;
}

Works

digraph graphname {
    node [shape=plaintext];
    rankdir=LR;
    1 [shape=none,width=0,height=0,margin=0,rank=min,pos="-1500, -10"];
}

Doesn't work

digraph graphname {
    node [shape=plaintext];
    rankdir=LR;
    1 [shape=none,width=0,height=0,margin=0,rank=min,pos="-1500, -10",label=<<B>Hello world</B>>];
}

The comment about HTML IDs not being supported in the parser might already mention this limitation https://github.com/cpettitt/graphlib-dot/blob/master/src/dot-grammar.pegjs

Hi

1. http://d3js.org/d3.v3.js
2. http://cpettitt.github.io/project/graphlib-dot/v0.5.2/graphlib-dot.js
3. http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js

I am using the scripts above to draw ER diagrm as below. I like the grah direction to be reversed. Is that possible ?

I am wondering how to remove a node in dagreD3.Digraph()?

var dot = require('graphlib-dot');
var graph1 = dot.read('digraph g { a -> b; subgraph cluster0 { b -> c; } }');
console.log(graph1.parent('b'));
var graph2 = dot.read('digraph g { subgraph cluster0 { b -> c; } a -> b; }');
console.log(graph2.parent('b'));

outputs:

undefined
cluster0

However graphviz renders b as being inside the subgraph in both cases.

As noted in https://stackoverflow.com/questions/2012036/graphviz-how-to-connect-subgraphs

It's necessary for compound graphs to have a compound=true property if clusters are to be connected.

I would have thought this sufficient:

var digraph = new Graph({compound:true});

However, it's actually necessary to do this:

digraph.setGraph({compound:true})

Which is a little obscure.

Would it be possible to set this automatically if the graph is compound?

Currently we always quote node ids during serialization. It would be nice to avoid this where it is not strictly necessary.

Thanks for the great library! I found a bug in the graph writer:

Consider a graph with a node attribute x=-1.4703333520951247e-16, when writing and reading the same graph, graphlib-dot yields TypeError: v is null in peg$c34:

var dot = require('graphlib-dot');
var graphlib = require('graphlib');

// prepare graph
var graph = new graphlib.Graph({directed: false});
graph.setNode(42, { x: -1.4703333520951247e-16 });

// show output
dot.write(graph); // -> 'strict graph {\n  "42" [x=-1.4703333520951247e-16]\n}\n'

// trigger TypeError
dot.read(dot.write(graph));
// Uncaught TypeError: Cannot read property '3' of null
//     at peg$c34 (node_modules/graphlib-dot/lib/dot-grammar.js:114:28)
//     at peg$parseidDef (node_modules/graphlib-dot/lib/dot-grammar.js:1421:16)
//     at peg$parseaList (node_modules/graphlib-dot/lib/dot-grammar.js:1173:20)
//     at peg$parseattrListBlock (node_modules/graphlib-dot/lib/dot-grammar.js:1093:16)
//     at peg$parseattrList (node_modules/graphlib-dot/lib/dot-grammar.js:1012:12)
//     at peg$parsenodeStmt (node_modules/graphlib-dot/lib/dot-grammar.js:808:16)
//     at peg$parsestmt (node_modules/graphlib-dot/lib/dot-grammar.js:689:20)
//     at peg$parsestmtList (node_modules/graphlib-dot/lib/dot-grammar.js:538:12)
//     at peg$parsegraphStmt (node_modules/graphlib-dot/lib/dot-grammar.js:452:28)
//     at Object.parse (node_modules/graphlib-dot/lib/dot-grammar.js:2372:18)

I think dot.write() produces a non-compliant string (because the ID is not allowed to have a dash -). The parser looks fine.

I'm using [email protected].