2
votes

Graphique DOT correctement mis à l'échelle

S'il vous plaît,

J'ai besoin de créer un graphique SVG avec D3-GraphViz dont la taille s'adapte parfaitement à une zone DIV. J'en ai essayé beaucoup mais sans succès.

Voici un exemple de code:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');

</script>

J'ai vu sur le site Web de D3 une propriété ".fit (true)" mais cela ne fonctionne tout simplement pas. Des idées ou des exemples?

d3.js graphviz

3 commentaires

Je crois que vous vous trompez, il n'y a pas de méthode fit () dans D3 (parce que D3 ne crée aucun graphique, c'est juste une collection de fonctions). Pouvez-vous partager ce site Web?

Bonjour @Geraldo Furtado, c'est ici: github.com/magjac/d3-graphviz#graphviz_fit

Merci d'avoir partagé. Ce n'est pas D3, c'est juste un plugin qui utilise D3. Voici une liste de plugins D3, où vous trouverez Graphviz: github.com/d3/d3 / wiki / Plugins

4 Réponses :

0
votes

Je ne sais rien de d3, mais dans Graphviz pur, il existe des outils pour contrôler la taille de sortie, en particulier l'attribut graphique size en paire avec ratio . Ils sont décrits en détail sur les liens mais permettez-moi de vous montrer un seul exemple:

sans taille ou ratio:

XXX

avec size et ratio = compress code>:

digraph {
    size="10,5"
    ratio=compress
    c ->d
    a -> b
}

Si c'est js, vous pouvez fournir le size arguments dynamiquement, non?

1 commentaires

Je comprends ce que vous avez dit @Dany. Mais le problème est que lorsque je fais cela, le graphique semble petit à l'intérieur du DIV - cela continue avec la même taille;)

1
votes

Vous pouvez le faire avec CSS, en mettant à l'échelle le svg que Graphviz produit jusqu'à la taille de votre élément maître #graph :

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  #graph {
    /* Just an example */
    height: 250px;
  }
  #graph svg {
    height: 100%;
    width: auto;
  }
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');

</script>

#graph svg {
    height: 100%;
    width: auto;
}

0 commentaires

1
votes

J'ai eu le même problème. Je viens de réaliser que la source js était tellement obsolète (j'ai également copié cette ligne à partir d'un exemple). Changez simplement la référence à

<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.min.js"></script>

Après cela, toutes les fonctionnalités répertoriées dans README.md du dépôt github sont devenues disponibles.

0 commentaires

0
votes

De la documentation de la méthode fit () :

Notez qu'à moins que la taille SVG n'ait été modifiée, cette option n'a aucun effet.

Voici un exemple montrant comment adapter parfaitement le SVG à une zone DIV:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.13/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.1.0/build/d3-graphviz.js"></script>
<div id="graph-container" style="width: 50%; height: 500px; margin:auto; border: 1px solid black"></div>
<script>

const graphContainer = d3.select("#graph-container");
const width = graphContainer.node().clientWidth;
const height = graphContainer.node().clientHeight;

graphContainer.graphviz()
    .width(width)
    .height(height)
    .fit(true)
    .renderDot('digraph  {a -> b}');

</script>

0 commentaires