Nathan : Différence entre versions
(→Fragment) |
|||
| Ligne 1 : | Ligne 1 : | ||
== Fragment == | == Fragment == | ||
| − | + | == Piste nathan d'outils: GraphVis == | |
| − | + | === Pseudo-code === | |
| − | Graph vis | + | Graph vis est un outils Open Source de visualisation de structure en diagrammes. L'outil se base sur le language DOT |
''' | ''' | ||
| Ligne 20 : | Ligne 20 : | ||
En fessant cela on pourrai implémenter ces lignes dans graphVis et génère un digramme en SVG. | En fessant cela on pourrai implémenter ces lignes dans graphVis et génère un digramme en SVG. | ||
| − | + | Donc l'intention en pseudo-code serait | |
| + | |||
| + | ''' | ||
| + | // afficher tout les ID des fragments à la ligne | ||
| + | // A chaque ligne si un frgament à un enfant inserer ces deux caractères -> et ensuite afficher tout les ID des fragments réponses qui sont raliés à lui | ||
| + | // faire donc une boucle qui pour chaque fragment affiche son ID et si il y a enfant inserer la fleches -> et afficher les ID des enfants qui lui sont rallier | ||
| + | // si il y plusieurs enfants concaténer la phrase ou entre chaque ID il y les caractères -> | ||
| + | |||
| + | ''' | ||
| − | ==== | + | === Code === |
| − | + | Construire deux fonction dans le fichier databuilder.js dans lequelle on trouve plusieur fonctions. | |
| + | 1er fonction BuildGraph | ||
| + | ''' | ||
| + | const buildDigraph = () => { | ||
| + | let digraph = ''; | ||
| + | |||
| + | Object.keys(fragments).forEach(key => { | ||
| + | let line = key + '-> {'; | ||
| + | //enfants = fragments[key]['children'] | ||
| + | fragments[key]['children'].forEach (reponse => { | ||
| + | line= line + reponse + ' '; | ||
| + | }) | ||
| + | line = line+'}'; | ||
| + | digraph = digraph + line + '\n' ; | ||
| + | }); | ||
| + | return digraph; | ||
| + | }; | ||
| + | ''' | ||
| + | Avec cette fonction on écrit des ligne qui suivent une structure spécifique. enne commence par L'ID du fragment utilisée ensuite la fonction insère un -> ouvre un crochet { et insère l'ID des enfants/réponses si il a des enfants | ||
| + | ce qui donne par exemple : | ||
| + | ''' | ||
| + | 0005-> {0007 0010 0021 } | ||
| − | + | ''' | |
| − | + | Avec un boucle forEach la fonction va examiner l'entièreté de l'objet sur le quelle on travaille et appliquer cette fonction sur chaque fragments. A la fin de chaque recherche de fragment il saute une ligne | |
| − | + | ''' | |
| − | + | digraph = digraph + line + '\n' ; | |
| + | ''' | ||
| + | Ce qui donne un resulat comme celui la | ||
| + | |||
| + | ''' | ||
| + | |||
| + | 0017-> {} | ||
| + | 0005-> {0007 0010 0021 } | ||
| + | 0007-> {0009 0030 0032 } | ||
| + | 0009-> {0025 0019 } | ||
| + | 0025-> {} | ||
| + | 0010-> {0008 } | ||
| + | 0021-> {0035 } | ||
| + | 0008-> {0015 } | ||
| + | 0015-> {0018 0036 } | ||
| + | 0018-> {} | ||
| + | 0019-> {0026 } | ||
| + | 0026-> {0028 0030 } | ||
| + | 0028-> {0035 } | ||
| + | 0030-> {} | ||
| + | 0027-> {} | ||
| + | 0032-> {} | ||
| + | 0035-> {} | ||
| + | 0036-> {} | ||
| + | 0002-> {0011 0024 0025 } | ||
| + | 0023-> {} | ||
| + | 0012-> {0025 } | ||
| + | 0011-> {} | ||
| + | 0016-> {0020 0034 } | ||
| + | 0020-> {} | ||
| + | 0024-> {} | ||
| + | 0034-> {0042 } | ||
| + | 0039-> {} | ||
| + | 0042-> {} | ||
| + | 0044-> {} | ||
| + | 0003-> {0006 0004 } | ||
| + | 0006-> {0004 } | ||
| + | 0004-> {0014 0033 0038 } | ||
| + | 0014-> {0022 0033 0045 } | ||
| + | 0022-> {} | ||
| + | 0029-> {0037 0041 } | ||
| + | 0033-> {0041 } | ||
| + | 0037-> {} | ||
| + | 0038-> {0045 } | ||
| + | 0041-> {} | ||
| + | 0045-> {} | ||
| + | |||
| + | ''' | ||
| + | Ensuite a moi d'y ajouter les parametres graph viz qui dans mon cas sont la création d'un diagramme il suffit juste donc d'appeler le diagramme | ||
| + | |||
| + | ''' | ||
| + | '''digraph { | ||
| + | '''0014-> {0022 0033 0045 } | ||
| + | 0022-> {} | ||
| + | 0029-> {0037 0041 } | ||
| + | 0033-> {0041 } | ||
| + | 0037-> {} | ||
| + | 0038-> {0045 } | ||
| + | 0041-> {} | ||
| + | 0045-> {} | ||
| + | '''}''' | ||
| + | ''' | ||
Version du 5 novembre 2023 à 11:27
Fragment
Piste nathan d'outils: GraphVis
Pseudo-code
Graph vis est un outils Open Source de visualisation de structure en diagrammes. L'outil se base sur le language DOT
digraph {
a -> b
}
Et avec ce code on peut visualiser une bulle 'a' dont part une flèche qui mène à b.
Peut être demander un structure au init.js de produire par exemple pour le fragment 0001 d'afficher son ID et de si il a un enfant afficher :
0001 -> 000? // l'ID de son enfant
En fessant cela on pourrai implémenter ces lignes dans graphVis et génère un digramme en SVG.
Donc l'intention en pseudo-code serait
// afficher tout les ID des fragments à la ligne // A chaque ligne si un frgament à un enfant inserer ces deux caractères -> et ensuite afficher tout les ID des fragments réponses qui sont raliés à lui // faire donc une boucle qui pour chaque fragment affiche son ID et si il y a enfant inserer la fleches -> et afficher les ID des enfants qui lui sont rallier // si il y plusieurs enfants concaténer la phrase ou entre chaque ID il y les caractères ->
Code
Construire deux fonction dans le fichier databuilder.js dans lequelle on trouve plusieur fonctions. 1er fonction BuildGraph const buildDigraph = () => { let digraph = ;
Object.keys(fragments).forEach(key => { let line = key + '-> {'; //enfants = fragments[key]['children'] fragments[key]['children'].forEach (reponse => { line= line + reponse + ' '; }) line = line+'}'; digraph = digraph + line + '\n' ; }); return digraph; }; Avec cette fonction on écrit des ligne qui suivent une structure spécifique. enne commence par L'ID du fragment utilisée ensuite la fonction insère un -> ouvre un crochet { et insère l'ID des enfants/réponses si il a des enfants ce qui donne par exemple : 0005-> {0007 0010 0021 }
Avec un boucle forEach la fonction va examiner l'entièreté de l'objet sur le quelle on travaille et appliquer cette fonction sur chaque fragments. A la fin de chaque recherche de fragment il saute une ligne digraph = digraph + line + '\n' ; Ce qui donne un resulat comme celui la
0017-> {} 0005-> {0007 0010 0021 } 0007-> {0009 0030 0032 } 0009-> {0025 0019 } 0025-> {} 0010-> {0008 } 0021-> {0035 } 0008-> {0015 } 0015-> {0018 0036 } 0018-> {} 0019-> {0026 } 0026-> {0028 0030 } 0028-> {0035 } 0030-> {} 0027-> {} 0032-> {} 0035-> {} 0036-> {} 0002-> {0011 0024 0025 } 0023-> {} 0012-> {0025 } 0011-> {} 0016-> {0020 0034 } 0020-> {} 0024-> {} 0034-> {0042 } 0039-> {} 0042-> {} 0044-> {} 0003-> {0006 0004 } 0006-> {0004 } 0004-> {0014 0033 0038 } 0014-> {0022 0033 0045 } 0022-> {} 0029-> {0037 0041 } 0033-> {0041 } 0037-> {} 0038-> {0045 } 0041-> {} 0045-> {}
Ensuite a moi d'y ajouter les parametres graph viz qui dans mon cas sont la création d'un diagramme il suffit juste donc d'appeler le diagramme
digraph { 0014-> {0022 0033 0045 } 0022-> {} 0029-> {0037 0041 } 0033-> {0041 } 0037-> {} 0038-> {0045 } 0041-> {} 0045-> {} }
