129 lines
3.9 KiB
JavaScript
129 lines
3.9 KiB
JavaScript
// output_popl_up_pruebas.js
|
|
|
|
// Obtener el contenedor del gráfico
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const elem = document.getElementById('poplUpContainer');
|
|
const form = document.getElementById('paramForm');
|
|
|
|
// Inicializar el gráfico 3D
|
|
const graph = ForceGraph3D()(elem)
|
|
.backgroundColor('#000000')
|
|
.nodeLabel('id')
|
|
.nodeAutoColorBy('group')
|
|
.nodeVal(1)
|
|
.linkColor(() => 'orange')
|
|
.onNodeClick(node => showNodeContent(node.content))
|
|
.onNodeHover(node => { elem.style.cursor = node ? 'pointer' : null; })
|
|
.forceEngine('d3')
|
|
//.d3Force('charge', d3.forceManyBody().strength(-300))
|
|
//.d3Force('link', d3.forceLink().distance(300).strength(1));
|
|
|
|
// Centrado automático del gráfico
|
|
function centerGraph() {
|
|
setTimeout(() => {
|
|
const width = elem.clientWidth;
|
|
const height = elem.clientHeight;
|
|
graph.zoomToFit(400, Math.min(width, height) * 0.1);
|
|
}, 500);
|
|
}
|
|
window.addEventListener('resize', () => {
|
|
graph.width(elem.clientWidth);
|
|
graph.height(elem.clientHeight);
|
|
centerGraph();
|
|
});
|
|
|
|
// Mostrar contenido del nodo
|
|
function showNodeContent(content) {
|
|
console.log('Contenido del nodo:', content);
|
|
}
|
|
|
|
// Función para obtener datos del servidor
|
|
async function getData(paramsObj = {}) {
|
|
try {
|
|
let url = '/api/data';
|
|
const params = new URLSearchParams();
|
|
|
|
// Establecer el tema fijo
|
|
params.append('tema', 'demografía y sociedad');
|
|
|
|
// Agregar parámetros del formulario, incluyendo complejidad como umbral
|
|
for (const key in paramsObj) {
|
|
if (paramsObj[key] !== undefined && paramsObj[key] !== '') {
|
|
params.append(key, paramsObj[key]);
|
|
}
|
|
}
|
|
|
|
url += `?${params.toString()}`;
|
|
console.log('🔎 Fetch URL:', url);
|
|
|
|
const response = await fetch(url);
|
|
if (!response.ok) throw new Error(response.statusText);
|
|
const data = await response.json();
|
|
console.log('Datos recibidos del servidor:', data);
|
|
|
|
// Filtrar enlaces inválidos
|
|
const nodeIds = new Set(data.nodes.map(node => node.id));
|
|
data.links = data.links.filter(link => nodeIds.has(link.source) && nodeIds.has(link.target));
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error('Error al obtener datos del servidor:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Función principal: fetch, filtrar por complejidad/umbral y renderizar
|
|
async function fetchAndRender() {
|
|
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;
|
|
|
|
// Usamos 'complejidad' como porcentaje de similitud mínima (umbral)
|
|
const paramsObj = {
|
|
subtematica,
|
|
palabraClave,
|
|
fechaInicio,
|
|
fechaFin,
|
|
nodos,
|
|
complejidad // enviado al backend y usado de umbral en cliente
|
|
};
|
|
|
|
// Parsear complejidad a número
|
|
const umbralPct = parseFloat(complejidad) || 0;
|
|
console.log(`Aplicando umbral de similitud: ${umbralPct}%`);
|
|
|
|
const graphData = await getData(paramsObj);
|
|
if (!graphData) return;
|
|
|
|
// Filtrar enlaces por umbral de similitud
|
|
let filteredLinks = graphData.links;
|
|
if (umbralPct > 0) {
|
|
filteredLinks = filteredLinks.filter(link => Number(link.value) >= umbralPct);
|
|
console.log(`Enlaces tras aplicar umbral: ${filteredLinks.length}`);
|
|
}
|
|
|
|
graph.graphData({ nodes: graphData.nodes, links: filteredLinks });
|
|
centerGraph();
|
|
}
|
|
|
|
// Escuchar evento submit del formulario
|
|
form.addEventListener('submit', event => {
|
|
event.preventDefault();
|
|
fetchAndRender();
|
|
});
|
|
|
|
// Cargar gráfico inicial
|
|
fetchAndRender();
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|