flow like the river

VISUALIZACION/public/output_glob_war.js

@@ -0,0 +1,123 @@
+// output_glob_war.js
+
+// Obtener el contenedor del gráfico
+const elem = document.getElementById('globWarContainer');
+
+// Inicializar el gráfico
+const graph = ForceGraph3D()(elem)
+  .backgroundColor('#000000')
+  .nodeLabel('id')
+  .nodeAutoColorBy('group')
+  .nodeVal(2)
+  .linkColor(() => 'green')
+  .onNodeClick(node => showNodeContent(node.content))
+  .onNodeHover(node => {
+    elem.style.cursor = node ? 'pointer' : null;
+  })
+  .forceEngine('d3')
+  .d3Force('charge', d3.forceManyBody().strength(-10))
+  .d3Force('link', d3.forceLink().distance(30).strength(1));
+
+// Función para obtener datos del servidor
+async function getData(paramsObj = {}) {
+  try {
+    let url = '/api/data';
+    const params = new URLSearchParams();
+
+    // Tema por defecto: "guerra global"
+    params.append('tema', 'guerra global');
+
+    // Agregar parámetros del formulario si existen
+    for (const key in paramsObj) {
+      if (paramsObj[key]) {
+        params.append(key, paramsObj[key]);
+      }
+    }
+
+    url += `?${params.toString()}`;
+
+    const response = await fetch(url);
+    const data = await response.json();
+
+    console.log('Datos recibidos del servidor:', data);
+
+    // Filtrar enlaces para nodos existentes
+    const nodeIds = new Set(data.nodes.map(n => n.id));
+    data.links = data.links.filter(l => nodeIds.has(l.source) && nodeIds.has(l.target));
+
+    console.log('Enlaces tras filtrar:', data.links);
+    return data;
+  } catch (error) {
+    console.error('Error al obtener datos del servidor:', error);
+    return { nodes: [], links: [] };
+  }
+}
+
+// Mostrar contenido del nodo al hacer click
+function showNodeContent(content) {
+  console.log('Contenido del nodo:', content);
+  // aquí podrías mostrarlo en un panel si quieres
+}
+
+// Centrar y escalar el gráfico
+function centerGraph() {
+  setTimeout(() => {
+    const width = elem.clientWidth;
+    const height = elem.clientHeight;
+    const padding = Math.min(width, height) * 0.1;
+    graph.zoomToFit(400, padding);
+  }, 500);
+}
+
+// Al cambiar el tamaño de la ventana, reajustar
+window.addEventListener('resize', () => {
+  graph.width(elem.clientWidth);
+  graph.height(elem.clientHeight);
+  centerGraph();
+});
+
+// Gestionar el submit del formulario de parámetros
+document.getElementById('paramForm').addEventListener('submit', event => {
+  event.preventDefault();
+
+  const subtematica  = document.getElementById('param2').value;
+  const palabraClave = document.getElementById('param1').value;
+  const fechaInicio  = document.getElementById('fecha_inicio').value;
+  const fechaFin     = document.getElementById('fecha_fin').value;
+  const nodos        = document.getElementById('nodos').value;
+  const complejidad  = document.getElementById('complejidad').value;
+
+  const paramsObj = {
+    subtematica,
+    palabraClave,
+    fechaInicio,
+    fechaFin,
+    nodos,
+    complejidad
+  };
+
+  getData(paramsObj).then(data => {
+    graph.graphData(data);
+    centerGraph();
+  });
+});
+
+// Cargar datos iniciales (guerra global) y renderizar
+getData().then(data => {
+  if (data.nodes && data.nodes.length) {
+    console.log(`Se recibieron ${data.nodes.length} nodos.`);
+    graph.graphData(data);
+    centerGraph();
+  } else {
+    console.warn('No se recibieron nodos para "guerra global".');
+  }
+});
+
+
+
+
+
+
+
+
+