gmamaladze/d3-dot-graph

This module provides D3js compatible library to parse and load files in graphviz DOT (.dot) (graph description language) format.

d3-dot-graph

This module provides D3js compatible library to parse and load files in graphviz DOT (.dot) (graph description language) format.

why?

While working on Java Platform Module System migration projects coming with Java 9 (as of August 2017), I am heavily using jdeps which is generating DOT (.dot) files. These are usually visualised using dot tool of graphviz.

In most cases it is enough, but I wanted to have nicer D3js visualisation and interaction.

example

See sample summary.dot file generated by jdeps visualised using D3js here: index.html

Inspired by Mike Bostock's Mobile Patent Suits

usage

d3.dot(url, callback);

Usage is identical with well known d3.json([url], [callback]) or d3.csv([url], [callback]).

<script src="https://cdn.jsdelivr.net/gh/gmamaladze/[email protected]/build/d3-dot-graph.min.js"></script>
<script>

d3.dot("/path/to/graph.dot", function(error, graph) {
  if (error) throw error;
  console.log(JSON.stringify(graph, null, true));
  //{
  //  "nodes": [ {"id": "Myriel"}, {"id": "Napoleon"}],
  //  "links": [ {"source": "Myriel"}, {"target": "Napoleon"}]
  //}  
});

</script>

parser

The parser was generated using PEG.js. The grammer is taken from here cpettitt/graphlib-dot. Thanks to Chris Pettitt.

You can also use parser independently from loader and converter.

build

npm install     #install dependencies and build
npm run build   #generate parser, and rollup

rollup -c -w (rollup --config --watch) #very convenient rolls the whenever sources are changed

d3-dot-graph's Issues

Can't get example to work

Hi, apologies if this is a silly issue - I can load the example from your repo in my browser (Firefox) no issue, but when I try to run the example on my own - for example on jsfiddle.net - it won't work - the svg element appears to just be empty. Here's the jsfiddle I tried:

https://jsfiddle.net/mairin/at1hem5v/5/

Any ideas on what I'm doing wrong?

Cannot read property 'links' of null

When trying to run the example, nothing is displayed and in the console the error "Uncaught TypeError: Cannot read property 'links' of null" is thrown. Additionally the parameter "graph" is null instead of the graph.