web-dev-qa-db-fra.com

Lecture de fichiers DOT en javascript / d3

Existe-t-il un moyen standard de lire et d'analyser les fichiers graphiques DOT en javascript, idéalement de manière à fonctionner correctement en d3?

Actuellement, la seule chose à laquelle je peux penser est de lire du texte brut et de faire mon propre analyse. Espérons que cela réinvente la roue.

d3.text("graph.dot", function(error, dotGraph) {
    ....
)};
d3.jsdot
32
ajwood

Pour obtenir le rendu des fichiers Graphviz DOT en Javascript, combinez les bibliothèques graphlib-dot et dagre-d .

La méthode graphlibDot.parse() prend un graphique ou une définition digraphique en syntaxe DOT et produit un objet graphique. La méthode dagreD3.Renderer.run() peut alors sortir cet objet graphique en SVG.

Vous pouvez ensuite utiliser des méthodes D3 supplémentaires pour ajouter des fonctionnalités au graphique, en récupérant des nœuds et des attributs Edge supplémentaires à partir de l'objet graphique graphlib selon les besoins.

Un exemple autonome insignifiant est:

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>
39
Richard Neish

Tard dans la soirée, mais si vous êtes toujours intéressé, voici un moyen de le faire avec le nouveau plug-in d3-graphviz que je viens de sortir:

<!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>
5
magjac

Même exemple, en utilisant la dernière version de graphlib-dot et 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>
4
PokerFace

La question demande une possibilité de visualiser .dot fichiers dans javascript ou D3js. Je pense que la solution de la réponse la mieux notée fonctionnera pour la plupart d'entre vous.

J'étais mécontent pour ces 3 raisons:

  1. Il implique des bibliothèques comme lowdash, dagre et graphlib en plus de D3js et est lourd.
  2. La sortie de l'analyseur n'est pas un D3js structure de données "frénétiquement".
  3. Utilisation (API) dans le style non D3js.

C'est pourquoi j'ai créé un adaptateur qui vous permettra essentiellement d'utiliser .dot fichiers contenant des milliers de D3js échantillons en changeant une seule instruction. Si vous en avez D3js visualisation travaillant sur la structure de données suivante:

{
  "nodes": [ {"id": "Myriel"}, {"id": "Napoleon"}],
  "links": [ {"source": "Myriel"}, {"target": "Napoleon"}]
}

Incluez simplement le script suivant et appelez 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>

au lieu de:

d3.json(url, function(graph) {...});

référentiel GitHub avec code et exemples

1
George Mamaladze