122 lines
3.4 KiB
JavaScript
Executable file
122 lines
3.4 KiB
JavaScript
Executable file
// output_popl_up.js
|
|
|
|
// Obtener el contenedor del gráfico
|
|
const elem = document.getElementById('poplUpContainer');
|
|
|
|
// Inicializar el gráfico
|
|
const graph = ForceGraph3D()(elem)
|
|
.backgroundColor('#000000')
|
|
.nodeLabel('id')
|
|
.nodeAutoColorBy('group')
|
|
.nodeVal(5)
|
|
.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();
|
|
|
|
// Fijar el tema principal
|
|
params.append('tema', 'movimientos populares y levantamientos');
|
|
|
|
// Agregar otros parámetros si se han definido
|
|
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:', data);
|
|
|
|
// Validar y limpiar links
|
|
const nodeIds = new Set(data.nodes.map(node => node.id));
|
|
data.links = data.links.filter(link => {
|
|
const valid = nodeIds.has(link.source) && nodeIds.has(link.target);
|
|
if (!valid) {
|
|
console.log(`❌ Enlace inválido eliminado: ${link.source} -> ${link.target}`);
|
|
}
|
|
return valid;
|
|
});
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error('⚠️ Error al obtener datos:', error);
|
|
return { nodes: [], links: [] };
|
|
}
|
|
}
|
|
|
|
// Mostrar contenido del nodo en consola (puedes ampliar esta función)
|
|
function showNodeContent(content) {
|
|
console.log('🧠 Contenido del nodo:', content);
|
|
}
|
|
|
|
// Centrar el gráfico tras dibujarlo
|
|
function centerGraph() {
|
|
setTimeout(() => {
|
|
const width = elem.clientWidth;
|
|
const height = elem.clientHeight;
|
|
const padding = Math.min(width, height) * 0.1;
|
|
graph.zoomToFit(400, padding);
|
|
}, 500);
|
|
}
|
|
|
|
// Redibujar al cambiar tamaño ventana
|
|
window.addEventListener('resize', () => {
|
|
graph.width(elem.clientWidth);
|
|
graph.height(elem.clientHeight);
|
|
centerGraph();
|
|
});
|
|
|
|
// Manejar el formulario
|
|
document.getElementById('paramForm').addEventListener('submit', function(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(graphData => {
|
|
if (graphData) {
|
|
console.log("✅ Redibujando con nuevos datos...");
|
|
graph.graphData(graphData);
|
|
centerGraph();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Obtener datos iniciales
|
|
getData().then(graphData => {
|
|
if (graphData && graphData.nodes && graphData.nodes.length > 0) {
|
|
console.log(`✅ Se recibieron ${graphData.nodes.length} nodos.`);
|
|
graph.graphData(graphData);
|
|
centerGraph();
|
|
} else {
|
|
console.warn("⚠️ No se recibieron nodos para mostrar.");
|
|
console.log("🔍 Respuesta completa:", graphData);
|
|
}
|
|
});
|