carte mentale en JS

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
litchi
Messages : 5
Enregistré le : 15 août 2019, 11:27

carte mentale en JS

Message par litchi » 25 avr. 2021, 17:50

Bonjour,

Je souhaite afficher une carte mentale sur une page html. Je l'ai créé avec un logiciel de carte mentale, puis enregistré en json et transformé en JS, mais je ne sais pas comment l'afficher sur ma page html.
J'ai un niveau débutant en programmation et c'est dans le cadre de mes études que je dois créer une ressource. Je vous remercie pour votre aide, voici mon code:
"
{id:"f0030949-50f5-4e6f-9862-c8058a1d0d84",title:"La relativité de mouvement :\n\nl’état de repos ou de mouvement d’un objet doit être décrit\n\npar rapport à un autre objet, c'est le référentiel.",mindmap:{root:{id:"a8796fc6-50d4-4124-8ab6-049c206afcbb",parentId:null,text:{caption:"La relativité de mouvement :\n\nl’état de repos ou de mouvement d’un objet doit être décrit\n\npar rapport à un autre objet, c'est le référentiel."},children:[{id:"dfb702b1-5be1-460f-90b8-1cdfc1016cd0",parentId:"a8796fc6-50d4-4124-8ab6-049c206afcbb",text:{caption:"l'objet est"},children:[{id:"2ed38874-147a-4a72-8e5a-f7d30e94b30d",parentId:"dfb702b1-5be1-460f-90b8-1cdfc1016cd0",text:{caption:"immobile"},children:[]},{id:"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1",parentId:"dfb702b1-5be1-460f-90b8-1cdfc1016cd0",text:{caption:"en mouvement"},children:[]}]},{id:"9872989b-d8e1-4553-b137-544256da3dc2",parentId:"a8796fc6-50d4-4124-8ab6-049c206afcbb",text:{caption:"repères dans l'espace"},children:[{id:"cce9317f-d665-48df-b2dd-b1fcd5b30821",parentId:"9872989b-d8e1-4553-b137-544256da3dc2",text:{caption:"terrestre"},children:[]},{id:"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f",parentId:"9872989b-d8e1-4553-b137-544256da3dc2",text:{caption:"héliocentrique"},children:[]},{id:"f0c5fa88-2d81-4438-a8c4-6e3faf897b52",parentId:"9872989b-d8e1-4553-b137-544256da3dc2",text:{caption:"géocentrique"},children:[]}]}]}},dates:{created:1618903957795,modified:1618904811011},dimensions:{x:16000,y:8000},autosave:false,pluginData:{style:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{font:{style:"normal",weight:"bold",fontfamily:"sans-serif",decoration:"none",size:20,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#000000"},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#7f7f7f"},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#7f7f7f"},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#7f7f7f"},"9872989b-d8e1-4553-b137-544256da3dc2":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#bcbd22"},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#bcbd22"},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#bcbd22"},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#bcbd22"}},layout:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{offset:{x:0,y:0},foldChildren:false},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{offset:{x:646.296875,y:-9.390625},foldChildren:false},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{offset:{x:170,y:-85},foldChildren:false},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{offset:{x:156,y:42},foldChildren:false},"9872989b-d8e1-4553-b137-544256da3dc2":{offset:{x:574,y:154},foldChildren:false},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{offset:{x:270,y:-42},foldChildren:false},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{offset:{x:265,y:40},foldChildren:false},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{offset:{x:266,y:113},foldChildren:false}},image:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{},"9872989b-d8e1-4553-b137-544256da3dc2":{},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{}},draw:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{imgData:{objects:[{type:"path",originX:"center",originY:"center",left:1080,top:268,width:0,height:0,fill:null,overlayFill:null,stroke:"rgb(0, 0, 0)",strokeWidth:5,strokeDashArray:null,scaleX:1,scaleY:1,angle:0,flipX:false,flipY:false,opacity:1,selectable:true,hasControls:true,hasBorders:true,hasRotatingPoint:true,transparentCorners:true,perPixelTargetFind:false,shadow:{color:"rgb(0, 0, 0)",blur:0,offsetX:0,offsetY:0},visible:true,path:[["M",0,0],["Q",0,0,0,0],["L",0,0]]}],background:""}},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{},"9872989b-d8e1-4553-b137-544256da3dc2":{},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{}},attachment:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{},"9872989b-d8e1-4553-b137-544256da3dc2":{},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{}},url:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{urls:["https://youtu.be/nnUNk8A3ozI"]},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{},"9872989b-d8e1-4553-b137-544256da3dc2":{urls:["https://youtu.be/nnUNk8A3ozI"]},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{}}},cnodes:[{from:"2ed38874-147a-4a72-8e5a-f7d30e94b30d",to:"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1",canvasId:1,style:"dashed",color:"#ff0000",arrow:"0"}]} "

Avatar du membre
webmaster
Administrateur du site
Messages : 383
Enregistré le : 28 févr. 2017, 15:19

Re: carte mentale en JS

Message par webmaster » 26 avr. 2021, 11:24

Bonjour,
Ce code source est l'export produit par le logiciel ? Qu'il faut afficher en mode HTML ?
Ambitieux, a moins de trouver un script capable de s'en charger.
Mais apres quelques recherches, il n'y a rien de gratuit récent.

Tu es sur de l'énoncé ?
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

litchi
Messages : 5
Enregistré le : 15 août 2019, 11:27

Re: carte mentale en JS

Message par litchi » 12 mai 2021, 18:53

Bonjour,
Merci du temps que tu as pris pour me répondre, mais devant l'ampleur de la tâche et mon incompréhension, je renonce. Je vais plutôt faire la carte sous format image et ajouter des images cliquables qui ouvrent des vidéos dans une pop up. Ce sera davantge à ma portée je pense.
En fait, dans le cadre de mes études, je suis libre de coder comme je veux, je dois choisir l'ergonomie de la ressource en fonction de ce que je veux et ce que je peux faire.
Merci beaucoup quand même

Répondre