{"id":12613,"date":"2026-08-30T10:56:30","date_gmt":"2026-08-30T08:56:30","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=12613"},"modified":"2026-08-30T11:07:27","modified_gmt":"2026-08-30T09:07:27","slug":"graphe-de-connaissance-editeur","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=12613","title":{"rendered":"Graphe de connaissance  &#8211; editeur"},"content":{"rendered":"<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/7.9.0\/d3.min.js\"><\/script>\r\n<style>\r\n  :root {\r\n    --ink: #1B2430;\r\n    --ink-soft: #2B3648;\r\n    --paper: #F7F8F7;\r\n    --panel: #FFFFFF;\r\n    --border: #DDE2E1;\r\n    --text: #1A2E35;\r\n    --text-soft: #5C6C75;\r\n    --accent: #1D9E75;\r\n    --accent-dark: #0F6E56;\r\n    --accent-soft: #E4F9EC;\r\n    --warn: #BA7517;\r\n    --danger: #B8402E;\r\n    --sidebar-w: 340px;\r\n  }\r\n  * { box-sizing: border-box; }\r\n  html, body {\r\n    margin: 0; height: 100%; width: 100%;\r\n    font-family: \"Segoe UI\", system-ui, -apple-system, sans-serif;\r\n    color: var(--text);\r\n    background: var(--paper);\r\n    \/* overflow: hidden; *\/\r\n  }\r\n  #app { display: flex; height: 100vh; width: 100vw; }\r\n\r\n  \/* ---------- Sidebar ---------- *\/\r\n  #sidebar {\r\n    width: var(--sidebar-w);\r\n    min-width: var(--sidebar-w);\r\n    background: var(--ink);\r\n    color: #D7E0DE;\r\n    overflow-y: auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 18px 16px 40px;\r\n  }\r\n  #sidebar h1 {\r\n    font-size: 17px; font-weight: 700; color: #FFFFFF;\r\n    margin: 2px 0 2px;\r\n  }\r\n  #sidebar .subtitle {\r\n    font-size: 12px; color: #92A5A0; margin-bottom: 18px; line-height: 1.4;\r\n  }\r\n  .panel {\r\n    background: var(--ink-soft);\r\n    border-radius: 10px;\r\n    padding: 14px 14px 16px;\r\n    margin-bottom: 12px;\r\n  }\r\n  .panel h2 {\r\n    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;\r\n    color: #7FD9B4; margin: 0 0 10px; font-weight: 700;\r\n  }\r\n  .field { margin-bottom: 9px; }\r\n  .field label {\r\n    display: block; font-size: 12px; color: #AEB9C4; margin-bottom: 3px;\r\n  }\r\n  .field input[type=text], .field input[type=number], .field select {\r\n    width: 100%; padding: 7px 8px; border-radius: 6px; border: 1px solid #3A4657;\r\n    background: #232F3E; color: #F2F5F4; font-size: 13px; outline: none;\r\n  }\r\n  .field input[type=text]:focus, .field input[type=number]:focus, .field select:focus {\r\n    border-color: var(--accent);\r\n  }\r\n  .row2 { display: flex; gap: 8px; }\r\n  .row2 > .field { flex: 1; min-width: 0; }\r\n  .checkline {\r\n    display: flex; align-items: center; gap: 7px; font-size: 12.5px;\r\n    color: #C7D1D8; margin: 6px 0;\r\n  }\r\n  .checkline input { accent-color: var(--accent); }\r\n  button {\r\n    cursor: pointer; border: none; border-radius: 6px; font-size: 13px;\r\n    font-weight: 600; padding: 8px 12px; font-family: inherit;\r\n  }\r\n  .btn-primary { background: var(--accent); color: #062017; width: 100%; }\r\n  .btn-primary:hover { background: #21B784; }\r\n  .btn-secondary { background: #2E3B4C; color: #E4ECEA; width: 100%; }\r\n  .btn-secondary:hover { background: #384863; }\r\n  .btn-danger { background: var(--danger); color: #FFF0EC; width: 100%; }\r\n  .btn-danger:hover { background: #CC4B37; }\r\n  .btn-row { display: flex; gap: 8px; }\r\n  .btn-row > button { flex: 1; }\r\n  #fileInput { display: none; }\r\n\r\n  .type-list { max-height: 140px; overflow-y: auto; padding-right: 2px; }\r\n  .type-list::-webkit-scrollbar { width: 6px; }\r\n  .type-list::-webkit-scrollbar-thumb { background: #3A4657; border-radius: 3px; }\r\n\r\n  .reltype-row {\r\n    display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; color: #C7D1D8;\r\n  }\r\n  .reltype-row input[type=color] {\r\n    width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px; background: none; flex: none;\r\n    cursor: pointer;\r\n  }\r\n  .reltype-row .reltype-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n  .reltype-row .reltype-del {\r\n    background: none; border: none; color: #8A97A0; font-size: 15px; line-height: 1; padding: 2px 4px;\r\n  }\r\n  .reltype-row .reltype-del:hover { color: var(--danger); }\r\n  .hint { font-size: 11px; color: #8A97A0; margin-top: 4px; line-height: 1.4; }\r\n\r\n  .swatch {\r\n    width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px;\r\n    flex: none;\r\n  }\r\n  .filter-actions { display: flex; gap: 8px; margin-top: 6px; }\r\n  .filter-actions button { flex: 1; background: #2E3B4C; color: #C7D1D8; font-size: 11px; padding: 5px; }\r\n\r\n  .range-value { font-size: 11.5px; color: #92A5A0; float: right; }\r\n  input[type=range] { width: 100%; accent-color: var(--accent); }\r\n\r\n  #details-empty { font-size: 12.5px; color: #7C8894; line-height: 1.5; }\r\n  .detail-title { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 8px; }\r\n  .badge {\r\n    display: inline-block; font-size: 10.5px; padding: 2px 7px; border-radius: 999px;\r\n    background: #2E3B4C; color: #9FE1CB; margin-bottom: 8px;\r\n  }\r\n\r\n  #stats {\r\n    margin-top: auto; padding-top: 14px; font-size: 11.5px; color: #7C8894;\r\n    border-top: 1px solid #2E3B4C; line-height: 1.7;\r\n  }\r\n  #stats b { color: #C7D1D8; }\r\n\r\n  \/* ---------- Canvas area ---------- *\/\r\n  #canvas-area { position: relative; flex: 1; min-width: 0; }\r\n  #topbar {\r\n    position: absolute; top: 0; left: 0; right: 0; height: 46px;\r\n    display: flex; align-items: center; padding: 0 16px; gap: 14px;\r\n    background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);\r\n    border-bottom: 1px solid var(--border); z-index: 5; font-size: 12.5px; color: var(--text-soft);\r\n  }\r\n  #topbar input#searchBox {\r\n    padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border);\r\n    font-size: 12.5px; width: 220px; outline: none;\r\n  }\r\n  #topbar input#searchBox:focus { border-color: var(--accent); }\r\n  #zoomHint { margin-left: auto; color: #9AA6A3; }\r\n\r\n  svg { width: 100%; height: 100%; display: block; }\r\n  .link-path { fill: none; }\r\n  .link-hit { fill: none; stroke: transparent; stroke-width: 14px; cursor: pointer; }\r\n  .link-label-bg { fill: var(--paper); opacity: 0.88; }\r\n  .link-label { font-size: 10px; \r\n\t  fill: #5C6C75; \r\n\t  pointer-events: none; }\r\n  .node circle { stroke: #ffffff; stroke-width: 1.6px; cursor: grab; }\r\n  .node circle.selected { stroke: var(--ink); stroke-width: 3px; }\r\n  .node text {\r\n    font-size: 11px; \r\n\t  \/* fill: var(--text); *\/ \r\n\t  pointer-events: none; paint-order: stroke;\r\n    stroke: var(--paper); stroke-width: 3px;\r\n  }\r\n  .node.dimmed circle, .node.dimmed text { opacity: 0.15; }\r\n  .link-dimmed { opacity: 0.08; }\r\n  .link-selected { stroke: var(--ink) !important; }\r\n\r\n  #empty-state {\r\n    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;\r\n    flex-direction: column; gap: 10px; color: #9AA6A3; pointer-events: none;\r\n  }\r\n  #empty-state.hidden { display: none; }\r\n  #empty-state .big { font-size: 15px; color: #6C7A78; font-weight: 600; }\r\n<\/style>\r\n<div id=\"app\">\r\n\r\n  <aside id=\"sidebar\">\r\n    <h1>\u00c9diteur de graphe<\/h1>\r\n    <div class=\"subtitle\">Acteurs, m\u00e9tiers, disciplines et relations \u2014 vision binoculaire<\/div>\r\n\r\n    <div class=\"panel\">\r\n      <h2>Fichier<\/h2>\r\n      <div class=\"btn-row\">\r\n        <button class=\"btn-primary\" id=\"btnSave\">Enregistrer JSON<\/button>\r\n        <button class=\"btn-secondary\" id=\"btnLoadTrigger\">Charger JSON<\/button>\r\n      <\/div>\r\n      <input type=\"file\" id=\"fileInput\" accept=\".json,application\/json\">\r\n      <div style=\"height:8px\"><\/div>\r\n      <button class=\"btn-secondary\" id=\"btnExportCypher\">Exporter vers <span class='tooltipsall tooltipsincontent classtoolTips5'>Neo4J<\/span> (Cypher)<\/button>\r\n      <div style=\"height:8px\"><\/div>\r\n      <div class=\"btn-row\">\r\n        <button class=\"btn-secondary\" id=\"btnResetLayout\">R\u00e9organiser<\/button>\r\n        <button class=\"btn-danger\" id=\"btnClear\">Vider le graphe<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"panel\">\r\n      <h2>Types de relations<\/h2>\r\n      <div class=\"field\">\r\n        <div class=\"row2\">\r\n          <div class=\"field\"><input type=\"text\" id=\"newRelTypeName\" placeholder=\"ex. oriente vers\"><\/div>\r\n          <div class=\"field\" style=\"flex: 0 0 34px;\"><input type=\"color\" id=\"newRelTypeColor\" value=\"#8A97A0\"><\/div>\r\n        <\/div>\r\n        <button class=\"btn-primary\" id=\"btnAddRelType\">Ajouter le type<\/button>\r\n      <\/div>\r\n      <div class=\"type-list\" id=\"relTypeDefsList\"><\/div>\r\n      <div class=\"hint\">D\u00e9finissez ici les types disponibles ; ils alimentent le formulaire de relation ci-dessous.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"panel\">\r\n      <h2>Ajouter un n\u0153ud<\/h2>\r\n      <div class=\"field\">\r\n        <label for=\"nodeLabel\">Nom<\/label>\r\n        <input type=\"text\" id=\"nodeLabel\" placeholder=\"ex. Orthoptiste\">\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label for=\"nodeType\">Cat\u00e9gorie<\/label>\r\n        <input type=\"text\" id=\"nodeType\" list=\"nodeTypeOptions\" placeholder=\"ex. M\u00e9tier\">\r\n        <datalist id=\"nodeTypeOptions\"><\/datalist>\r\n      <\/div>\r\n      <button class=\"btn-primary\" id=\"btnAddNode\">Ajouter le n\u0153ud<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"panel\">\r\n      <h2>Ajouter une relation<\/h2>\r\n      <div class=\"field\">\r\n        <label for=\"relSource\">Depuis<\/label>\r\n        <select id=\"relSource\"><\/select>\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label for=\"relTarget\">Vers<\/label>\r\n        <select id=\"relTarget\"><\/select>\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label for=\"relType\">Type de relation<\/label>\r\n        <select id=\"relType\"><\/select>\r\n      <\/div>\r\n      <div class=\"row2\">\r\n        <div class=\"field\">\r\n          <label for=\"relWeight\">Pond\u00e9ration<\/label>\r\n          <input type=\"number\" id=\"relWeight\" step=\"0.1\" placeholder=\"1\">\r\n        <\/div>\r\n        <div class=\"field\" style=\"display:flex; align-items:flex-end;\">\r\n          <label class=\"checkline\" style=\"margin-bottom:7px;\">\r\n            <input type=\"checkbox\" id=\"relOriented\"> orient\u00e9e\r\n          <\/label>\r\n        <\/div>\r\n      <\/div>\r\n      <button class=\"btn-primary\" id=\"btnAddRel\">Ajouter la relation<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"panel\">\r\n      <h2>Filtres<\/h2>\r\n      <div class=\"field\">\r\n        <label>Types de relations affich\u00e9s<\/label>\r\n        <div class=\"type-list\" id=\"relTypeFilters\"><\/div>\r\n        <div class=\"filter-actions\">\r\n          <button id=\"relFilterAll\">Tout cocher<\/button>\r\n          <button id=\"relFilterNone\">Tout d\u00e9cocher<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label>Cat\u00e9gories de n\u0153uds affich\u00e9es<\/label>\r\n        <div class=\"type-list\" id=\"nodeTypeFilters\"><\/div>\r\n        <div class=\"filter-actions\">\r\n          <button id=\"nodeFilterAll\">Tout cocher<\/button>\r\n          <button id=\"nodeFilterNone\">Tout d\u00e9cocher<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label>Pond\u00e9ration minimale <span class=\"range-value\" id=\"weightMinLabel\">0<\/span><\/label>\r\n        <input type=\"range\" id=\"weightMin\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0\">\r\n      <\/div>\r\n      <label class=\"checkline\">\r\n        <input type=\"checkbox\" id=\"hideIsolated\"> masquer les n\u0153uds isol\u00e9s\r\n      <\/label>\r\n      <label class=\"checkline\">\r\n        <input type=\"checkbox\" id=\"showLabels\" checked> afficher les \u00e9tiquettes de relation\r\n      <\/label>\r\n    <\/div>\r\n\r\n    <div class=\"panel\" id=\"details-panel\">\r\n      <h2>D\u00e9tails<\/h2>\r\n      <div id=\"details-empty\">Cliquez un n\u0153ud ou une relation pour l&#8217;inspecter, le modifier ou le supprimer.<\/div>\r\n      <div id=\"details-content\" style=\"display:none;\"><\/div>\r\n    <\/div>\r\n\r\n    <div id=\"stats\"><\/div>\r\n  <\/aside>\r\n\r\n  <div id=\"canvas-area\">\r\n    <div id=\"topbar\">\r\n      <input type=\"text\" id=\"searchBox\" placeholder=\"Rechercher un n\u0153ud\u2026\">\r\n      <span id=\"zoomHint\">Molette : zoom \u00b7 glisser un n\u0153ud : repositionner<\/span>\r\n    <\/div>\r\n    <div id=\"empty-state\">\r\n      <div class=\"big\">Graphe vide<\/div>\r\n      <div>Ajoutez des n\u0153uds depuis le panneau de gauche, ou chargez un fichier JSON.<\/div>\r\n    <\/div>\r\n    <svg id=\"svg\"><\/svg>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\n\n<script type='text\/javascript'>\nvar id = \"12617\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/12617.js?ver=1788080632'><\/script>\n<script type=\"text\/javascript\"> toolTips('.classtoolTips5','<a style=\"text-decoration: none;\" href=\"https:\/\/neo4j.com\/\"><img style=\"width: 180px; height: 50px;\" src=\"\/wp-content\/uploads\/2025\/01\/Neo4j-logo_color.png\" \/><\/a>'); <\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12613","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/12613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12613"}],"version-history":[{"count":2,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/12613\/revisions"}],"predecessor-version":[{"id":12619,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/12613\/revisions\/12619"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}