d3.js - examples - Lectura de archivos DOT en javascript/d3
jquery d3 (4)
El mismo ejemplo, usando la última versión de graphlib-dot y dagre-d3.
window.onload = function() {
// Parse the DOT syntax into a graphlib object.
var g = graphlibDot.read(
''digraph {/n'' +
'' a -> b;/n'' +
'' }''
)
// Render the graphlib object using d3.
var renderer = dagreD3.render();
d3.select("svg g").call(renderer, g);
// Optional - resize the SVG element based on the contents.
var svg = document.querySelector(''#graphContainer'');
var bbox = svg.getBBox();
svg.style.width = bbox.width + 40.0 + "px";
svg.style.height = bbox.height + 40.0 + "px";
}
svg {
overflow: hidden;
}
.node rect {
stroke: #333;
stroke-width: 1.5px;
fill: #fff;
}
.edgeLabel rect {
fill: #fff;
}
.edgePath {
stroke: #333;
stroke-width: 1.5px;
fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cpettitt.github.io/project/graphlib-dot/latest/graphlib-dot.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<html>
<body>
<script type=''text/javascript''>
</script>
<svg id="graphContainer">
<g/>
</svg>
</body>
</html>
¿Existe una forma estándar de leer y analizar los archivos gráficos DOT en JavaScript, idealmente de manera que funcione bien en d3?
Actualmente, lo único que se me ocurre hacer es leer texto sin formato y hacer mi propio análisis sintáctico. Sin embargo, con suerte esto sería reinventar la rueda.
d3.text("graph.dot", function(error, dotGraph) {
....
)};
La pregunta solicita la posibilidad de visualizar archivos .dot en javascript o D3js . Creo que la solución de la respuesta mejor calificada funcionará para la mayoría de ustedes.
No estaba contento por estas 3 razones:
- Involucra bibliotecas como
lowdash,dagreygraphlibademás deD3jsy es heavyweight. - El resultado del analizador no es una estructura de datos "frita" de D3js.
- Uso (API) en estilo no D3js.
Es por eso que creé un adaptador que básicamente te permitirá usar archivos .dot con cualquiera de los miles de muestras D3js cambiando solo una declaración. Si tiene alguna visualización de D3js trabajando en la siguiente estructura de datos:
{
"nodes": [ {"id": "Myriel"}, {"id": "Napoleon"}],
"links": [ {"source": "Myriel"}, {"target": "Napoleon"}]
}
Simplemente incluya la siguiente secuencia de comandos y llame a d3.dot :
<script src="https://cdn.jsdelivr.net/gh/gmamaladze/[email protected]/build/d3-dot-graph.min.js"></script>
<script>
d3.dot(url, function(graph) {
...
});
</script>
en lugar de:
d3.json(url, function(graph) {...});
Para obtener los archivos Graphure DOT renderizados en Javascript, combine las graphlib-dot y dagre-d3 .
El método graphlibDot.parse() toma una definición de gráfico o dígrafo en la sintaxis DOT y produce un objeto gráfico. El método dagreD3.Renderer.run() puede generar este objeto de gráfico a SVG.
Luego puede usar métodos D3 adicionales para agregar funcionalidad al gráfico, recuperando atributos adicionales de nodo y borde del objeto graphlib graph según sea necesario.
Un ejemplo autónomo trivial es:
window.onload = function() {
// Parse the DOT syntax into a graphlib object.
var g = graphlibDot.parse(
''digraph {/n'' +
'' a -> b;/n'' +
'' }''
)
// Render the graphlib object using d3.
var renderer = new dagreD3.Renderer();
renderer.run(g, d3.select("svg g"));
// Optional - resize the SVG element based on the contents.
var svg = document.querySelector(''#graphContainer'');
var bbox = svg.getBBox();
svg.style.width = bbox.width + 40.0 + "px";
svg.style.height = bbox.height + 40.0 + "px";
}
svg {
overflow: hidden;
}
.node rect {
stroke: #333;
stroke-width: 1.5px;
fill: #fff;
}
.edgeLabel rect {
fill: #fff;
}
.edgePath {
stroke: #333;
stroke-width: 1.5px;
fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cpettitt.github.io/project/graphlib-dot/v0.4.10/graphlib-dot.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/v0.1.5/dagre-d3.min.js"></script>
<html>
<body>
<script type=''text/javascript''>
</script>
<svg id="graphContainer">
<g/>
</svg>
</body>
</html>
Tarde en la fiesta, pero si todavía está interesado, esta es una forma de hacerlo con el nuevo complemento d3-graphviz que acabo de lanzar:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js"></script>
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.0.4/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.renderDot(''digraph {a -> b}'');
</script>