123 lines
3.2 KiB
JavaScript
Executable file
123 lines
3.2 KiB
JavaScript
Executable file
// 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".');
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|