Afficher une cate mentale en js sur une page html

Signaler
-
 Totox -
Bonjour,

J'ai besoin d'aide en JS, je débute. J'ai besoin d'afficher sur ma page html une carte mentale que j'ai réalisé dans un logiciel de carte mentale, puis enregistré en json, puis transformé en JS (car je pensais que je comprendrais mieux). Je voudrais maintenant l'afficher sur ma page html mais je ne sais pas comment faire.

Je vous remercie de l'aide que vous voudrez bien m'apporter,

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"}]

Configuration: Macintosh / Chrome 89.0.4389.128

1 réponse

Salut,
"Je voudrais maintenant l'afficher sur ma page html mais je ne sais pas comment faire. "
carte mentale?
Qu'avez vous essayé?

Il faut déjà choisir une méthode pour dessiner la "carte".
Vous pouvez utiliser le DOM, ça revient donc à créer uniquement une page HTML.
Sur la carte les lieux seront des éléments de la page(balise) ou simplement situé sur une image.
Éventuellement en utilisant les areamap(qui permet de délimiter des zones cliquables si besoin).
Ou même CANVAS si vous avez besoin de fonctions de dessins avancées et que le référencement ne vous importe pas.

Votre question est assez trouble:
JSON n'est qu'(un format de données.
Il faut donc l'exploiter pour en obtenir quelque chose.
Publier (mal , merci d'ajouter les balises de code pour y voir plus clair) un JSon ça avance personne, et pas vous.
Surtout que je me doute que celui ci est généré automatiquement, donc corresponds probablmement déjà à un programme existant.
Vous pouvez vous en inspirer.
Ou avez à créer votre propre programme pour rendre le contenu en affichage HTML(ou autre média voulu).

exemple:

var carteJSON={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."}

var titrePrincipal=document.createElement('h1');
titrePrincipal.innerHTML=carteJSON.title;
document.appendChild('titrePrincipal');
//-- etc...


"puis enregistré en json, puis transformé en JS (car je pensais que je comprendrais mieux)"
Il y a aussi l'API(objet) JSON qui permet de faire cela.
D'ailleurs aucune nécessité de transformer l'un en l'autre, la syntaxe est identique(cela sert à indiquer si on utilise en tant qu'objet ou en tant que chaînes de caractères)...
Copier/coller un JSON dans du JavaScript c'est une notation objet(raccourcie).
Pour utiliser uniquement en chaînes de caractères(ex: un fichier JSON il faut passer par
JSON.stringify(monJSON);
.

https://www.w3schools.com/js/js_json_intro.asp

Bref pas bien compliqué à comprendre le JSON.
C'est de ce que vous devez en faire sur lequel vous devez vous concentrer.

Soit une mise en page avec HTML/CSS, donc facilement exploitable avec du JSON.
Soit du dessin élaboré en passant par CANVAS, dans cer cas il faut connaître l'API CANVAS et les fonctions de dessins.

Donc de l'intégration plus que banale. Utilisez l'image comme référence dans ce cas.