15. venn ejemplos

Ejemplos de uso del motor de diagramas de Venn v2

Ejemplos directos y automáticos para Venn de 2 y 3 conjuntos.

Venn 2 Venn 3 operaciones cardinalidades layout manual

Ir a la documentación

1. Uso directo: Venn 2

crearDiagramaConjuntos2("venn2-directo", {
  nombreUniverso: "U",
  nombreA: "A",
  nombreB: "B",
  A: ["1","2","3","4"],
  B: ["3","4","5","6"],
  operacion: "interseccion",
  mostrarCardinalidadConjuntos: true,
  mostrarCardinalidad: true,
  mostrarCardinalidadOperacion: true
});

2. Uso directo: Venn 3

crearDiagramaConjuntos3("venn3-directo", {
  nombreUniverso: "U",
  nombreA: "A",
  nombreB: "B",
  nombreC: "C",
  A: ["1","2","3","4","7"],
  B: ["3","4","5","6","7"],
  C: ["2","4","6","7","8"],
  operacion: "interseccionABC",
  mostrarCardinalidadConjuntos: true,
  mostrarCardinalidad: true
});

3. Automático: clase directa

<div class="diagrama-conjuntos2-auto"
     data-config='{
       "nombreUniverso":"U",
       "nombreA":"M",
       "nombreB":"P",
       "A":["2","4","6","8"],
       "B":["3","6","9","12"],
       "operacion":"union"
     }'></div>

4. Automático: Venn 3

<div class="diagrama-conjuntos3-auto"
     data-config='{
       "nombreUniverso":"U",
       "nombreA":"A",
       "nombreB":"B",
       "nombreC":"C",
       "A":["1","2","3","7"],
       "B":["3","4","5","7"],
       "C":["2","5","6","7"],
       "operacion":"unionABC"
     }'></div>

5. Clase genérica + data-tipo

<div class="diagrama-conjuntos-auto"
     data-tipo="venn2"
     data-width="760"
     data-height="500"
     data-config='{
       "nombreUniverso":"U",
       "nombreA":"A",
       "nombreB":"B",
       "A":["a","b","c","d"],
       "B":["c","d","e","f"],
       "operacion":"diferenciaSimetrica"
     }'></div>

6. Regiones activas manuales

crearDiagramaConjuntos2("venn-regiones", {
  nombreA: "A",
  nombreB: "B",
  A: ["1","2","3","4"],
  B: ["3","4","5","6"],
  regionesActivas: ["A_only","AB"],
  mostrarNombreOperacion: false,
  mostrarCardinalidad: true
});

7. Layout manual en Venn 2

crearDiagramaConjuntos2("venn-layout-manual", {
  nombreA: "A",
  nombreB: "B",
  A: ["1","2"],
  B: ["1","2","3","4","5"],
  layout: "manual",
  relacionGrafica: "disjuntos",
  validarConsistenciaVisual: true,
  operacion: "union",
  mostrarCardinalidadConjuntos: true
});

8. Cardinalidades

crearDiagramaConjuntos2("venn-cardinalidades", {
  nombreA: "A",
  nombreB: "B",
  A: ["1","2","3","4","5"],
  B: ["4","5","6","7"],
  operacion: "complementoA",
  mostrarCardinalidad: true,
  mostrarCardinalidadCero: true,
  prefijoCardinalidad: "#",
  mostrarCardinalidadOperacion: true,
  prefijoCardinalidadOperacion: "n="
});

9. Redibujar un contenedor automático

const contenedor = document.getElementById("venn2-auto");

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

DiagramasVennAuto.redibujar(contenedor);

10. Scripts necesarios

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