d3-dot-graph/README.md
2017-09-01 15:45:55 +02:00

2.1 KiB

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 havily using jdeps which is generating DOT (.dot) files. These are usually visualized using dot tool of graphviz.

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

example

See sample summary.dot file generated by jdeps visualized using D3js]d3js here: index.html

Sample .dot file generated by jdeps visualized using D3js

Inspired by [Mike Bostosck][mbostock]

usage

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

<script src="https://cdn.jsdelivr.net/gh/gmamaladze/d3-dot-graph@1.0.0/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

notes