manual de mi pagina

14. venn documentacion

Documentación del motor de diagramas de Venn v2

Esta documentación resume cómo trabajar con los archivos:

diagramasvenn-renderv2.js motor principal diagramasvenn-autov2.js auto-render

El sistema trabaja con diagramas de 2 conjuntos y de 3 conjuntos, tanto en modo directo como automático.

1. Orden de carga

<script src="diagramasvenn-renderv2.js"></script>
<script src="diagramasvenn-autov2.js"></script>

Primero va el motor y después el archivo automático.

2. API principal

window.DiagramasVenn

crearDiagramaConjuntos
crearDiagramaConjuntos2
crearDiagramaConjuntos3

3. API del auto-render

window.DiagramasVennAuto

inicializar(root)
redibujar(ref)
autoInicializar()
obtenerAPI()
obtenerDefinicionDesdeContenedor()

4. Tipos soportados

Tipo	Función directa	Clase auto	data-tipo
Venn de 2 conjuntos	`crearDiagramaConjuntos2`	`diagrama-conjuntos2-auto`	`conjuntos2`, `venn2`, `2`
Venn de 3 conjuntos	`crearDiagramaConjuntos3`	`diagrama-conjuntos3-auto`	`conjuntos3`, `venn3`, `3`
Modo genérico	`crearDiagramaConjuntos`	`diagrama-conjuntos-auto`	se decide por `modo` o `tipo`

5. Uso directo mínimo

<canvas id="venn2" width="760" height="500"></canvas>

<script src="diagramasvenn-renderv2.js"></script>
<script>
crearDiagramaConjuntos2("venn2", {
  nombreUniverso: "U",
  nombreA: "A",
  nombreB: "B",
  A: ["1","2","3"],
  B: ["3","4","5"],
  operacion: "union"
});
</script>

6. Uso automático mínimo

<div class="diagrama-conjuntos2-auto"
     data-config='{
       "nombreUniverso":"U",
       "nombreA":"A",
       "nombreB":"B",
       "A":["1","2","3"],
       "B":["3","4","5"],
       "operacion":"union"
     }'></div>

7. Atributos del modo automático

`class`	Tipo del contenedor automático.
`data-tipo`	`conjuntos2`, `venn2`, `2`, `conjuntos3`, `venn3`, `3`.
`data-config`	Configuración JSON.
`data-width`	Ancho lógico del canvas.
`data-height`	Alto lógico del canvas.

8. Selectores auto

.diagrama-conjuntos2-auto
.diagrama-conjuntos3-auto
.diagrama-conjuntos-auto[data-tipo]

9. Datos base

Puedes pasar los conjuntos como A, B, C, o dentro de conjuntos.

{
  "A":["1","2","3"],
  "B":["3","4","5"]
}

{
  "conjuntos":{
    "A":["1","2","3"],
    "B":["3","4","5"]
  }
}

10. Operaciones de 2 conjuntos

`A`	Sombréa todo A.
`B`	Sombréa todo B.
`union`	`A ∪ B`
`interseccion`	`A ∩ B`
`diferenciaAB`	`A − B`
`diferenciaBA`	`B − A`
`diferenciaSimetrica`	`A △ B`
`complementoA`	`Aᶜ`
`complementoB`	`Bᶜ`
`exterior`	`U − (A ∪ B)`
`universo`	Todo U.
`ninguna`	Sin sombreado.

11. Operaciones de 3 conjuntos

`A`, `B`, `C`	Sombréa cada conjunto.
`unionABC`	`A ∪ B ∪ C`
`unionAB`, `unionAC`, `unionBC`	Uniones parciales.
`interseccionAB`, `interseccionAC`, `interseccionBC`	Intersecciones dobles.
`interseccionABC`	`A ∩ B ∩ C`
`diferenciaA_BC`, `diferenciaB_AC`, `diferenciaC_AB`	Diferencias respecto de los otros dos conjuntos.
`complementoA`, `complementoB`, `complementoC`	Complementos.
`exterior`	`U − (A ∪ B ∪ C)`
`universo`	Todo U.
`ninguna`	Sin sombreado.

12. Regiones activas manuales

Para 2 conjuntos: A_only, B_only, AB, OUT.

Para 3 conjuntos: A_only, B_only, C_only, AB_only, AC_only, BC_only, ABC, OUT.

{
  "regionesActivas":["A_only","AB"]
}

13. Etiquetas y cardinalidades

`mostrarEtiquetas`	Muestra u oculta etiquetas simples.
`mostrarCardinalidadConjuntos`	Muestra `n(A)`, `n(B)`, `n(C)`.
`formatoCardinalidadConjunto`	Plantilla, por ejemplo `"n({nombre})={n}"`.
`mostrarCardinalidad`	Muestra cardinalidad por región.
`mostrarCardinalidadCero`	Permite mostrar regiones vacías con 0.
`prefijoCardinalidad`	Prefijo regional, por defecto `#`.
`mostrarNombreOperacion`	Muestra la operación en el pie.
`mostrarCardinalidadOperacion`	Muestra el total de la operación activa.
`prefijoCardinalidadOperacion`	Prefijo del pie, por ejemplo `n=`.

14. Layout manual en Venn de 2 conjuntos

El motor detecta si A y B son coincidentes, A_en_B, B_en_A, disjuntos o superpuestos.

Si quieres, puedes forzar la relación gráfica:

{
  "layout":"manual",
  "relacionGrafica":"disjuntos",
  "validarConsistenciaVisual":true
}

15. Redibujar un contenedor automático

const contenedor = document.getElementById("miVenn");

contenedor.setAttribute("data-config", JSON.stringify({
  nombreA: "A",
  nombreB: "B",
  A: ["1","2","3"],
  B: ["3","4","5"],
  operacion: "interseccion"
}));

DiagramasVennAuto.redibujar(contenedor);

16. Archivo complementario

Abrir ejemplos