Обновить визуализацию графа заметок: заменить библиотеку на ForceGraph и улучшить обработку данных. Восстановить генерацию graph.json с узлами и рёбрами между заметками.

_pages/graph.md

@@ -1,16 +1,29 @@
 ---
+layout: single
 title: "Граф заметок"
 permalink: /graph/
-layout: single
 ---
 
-<div id="mynetwork" style="width:100%;height:70vh"></div>
-<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+<div id="graph" style="height:70vh"></div>
+
+<script src="https://unpkg.com/force-graph"></script>
 <script>
-  fetch("{{ '/graph.json' | relative_url }}").then(r=>r.json()).then(data=>{
-    const nodes = data.nodes.map(n=>({id:n.id,label:n.title,url:n.url}));
-    const edges = data.edges.map(e=>({from:e.source,to:e.target}));
-    const net = new vis.Network(document.getElementById('mynetwork'),{nodes,edges},{});
-    net.on("click", p => { if(p.nodes.length){ const n = nodes.find(x=>x.id===p.nodes[0]); if(n?.url) location.href=n.url; }});
-  });
+  fetch('{{ "/graph.json" | relative_url }}')
+    .then(r => r.json())
+    .then(data => {
+      const el = document.getElementById('graph');
+      const Graph = ForceGraph()(el)
+        .graphData(data)
+        .nodeId('id')
+        .nodeLabel(n => n.title)
+        .nodeAutoColorBy('group')
+        .backgroundColor(getComputedStyle(document.body).backgroundColor || '#111')
+        .linkColor(() => 'rgba(173,216,230,0.6)')
+        .linkDirectionalParticles(2)
+        .linkDirectionalParticleSpeed(0.004)
+        .onNodeClick(n => window.location = n.url);
+
+      // чуть уменьшить размеры узлов/шрифтов для тёмной темы
+      Graph.nodeRelSize(6);
+    });
 </script>