Graphique acyclique dirigé utilisant d3.js sans DOT

Je suis en train de dessiner graphe dirigé acyclique à l'aide de d3.js. Lors de la recherche pour la mise en page, je suis tombé sur Dagremais il semble être de moins, car je ne veux pas utiliser de POINT en fonction du code n'importe où. Si quelqu'un sait à propos de Javascript et solution pour telle ou plugin/mise en page personnalisée pour DAG, s'il vous plaît laissez-moi savoir. Merci à l'avance.

source d'informationauteur A.G.

  1. 29

    Dagre auteur ici. Dagre ne comprend pas tout de graphviz code - c'est du pur JavaScript. Il est basé sur des techniques de mise en page; les deux sont basés sur des techniques de la Sugiyama papier.

    Vous pouvez trouver quelques exemples de dagre ici:

    http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html
    http://cpettitt.github.io/project/dagre-d3/latest/demo/sentence-tokenization.html
    http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

    La minifiés source peut être trouvé ici: http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js. Elle horloges au sujet de 44K.

  2. 3

    Rendu dirigé acyclique graphiques (et effectivement en mettant en évidence l'orientation de la propriété) est un domaine de la Sugiyama algorithmes de disposition.

    Ils fondamentalement affecter des couches (par le biais d'un tri topologique) pour les nœuds, puis calculer un séquençage pour les noeuds dans les couches. À l'aide d'une simple heuristique pour inverser les cycles d'abord, cela fonctionne bien pour les graphes cycliques. Graphviz DOT a une mise en œuvre de cette disposition appelle dotqui est aussi le nom du format de fichier, il utilise, donc il est parfois un peu de confusion lors de la DOT est mentionné.

    Bien sûr, il existe d'autres implémentations de l'algorithme, même un cross-compilé en Javascript version de la dot est disponible. Le doute le plus complet de la solution disponible pour le Javascript est la mise en œuvre de l'algorithme dans le yFiles de la bibliothèque. Donc, si c'est à des fins commerciales scénario, vous voudrez peut-être jeter un oeil à la correspondante démonstration en direct. Notez que bien que yFiles est livré avec son propre rendu et de l'éditeur de mise en œuvre, vous pouvez toujours brancher le code dans d3.js depuis la mise en page algorithmes peuvent être utilisés comme la mise en œuvre autonome de "juste" calculer les coordonnées des nœuds, la connexion edge points, les virages, et les étiquettes. Cette application prend en charge un grand nombre de contraintes supplémentaires, comme le "Port de Contraintes" (à restreindre la direction du courrier entrant et sortant bords ainsi que leur emplacement exact à l'nœuds), hiérarchiquement regroupés nœuds (où chaque nœud peut avoir un parent du nœud et le nœud parent "contient" l'ensemble de ses nœuds enfants), de la couche et la séquence des contraintes, bord de l'étiquetage des contraintes, de l'autre bord de routage des styles, des bus de routage, et plus encore.

    Divulgation: je travaille pour la société qui crée de ladite bibliothèque, cependant, DONC je ne représente pas mon employeur.