carte mentale en JS
Posté : 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"}]} "
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"}]} "