manual de mi pagina

16. intervalos

Documentación del motor de recta numérica e intervalos v1

Esta página resume cómo usar los archivos:

rectaeintervalos_renderv1.js motor principal rectaeintervalos_autov1.js auto-render

El sistema permite dibujar rectas numéricas, intervalos, uniones, intersecciones y soluciones sobre la misma recta.

1. Orden de carga

<script src="rectaeintervalos_renderv1.js"></script>
<script src="rectaeintervalos_autov1.js"></script>

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

2. API principal

window.RectaIntervalos

parseConstExpr
parseRange
parseStep
normalizarConfig
crearRectaIntervalos
crearRectaSimple

3. API del auto-render

window.RectaIntervalosAuto

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

4. Tipos de contenedor automático

Tipo	Clase	data-tipo
Recta numérica / intervalos	`recta-intervalos-auto`	`recta-intervalos`, `recta`, `intervalos`, `recta-numerica`
Alias equivalente	`recta-numerica-auto`	mismos valores
Modo genérico	`recta-auto`	uno de los valores anteriores

5. Uso directo mínimo

<canvas id="miRecta" width="760" height="250"></canvas>

<script src="rectaeintervalos_renderv1.js"></script>
<script>
RectaIntervalos.crearRectaIntervalos("miRecta", {
  range: ["-5","5"],
  majorStep: "1",
  intervals: [
    { id:"A", from:"-2", to:"3", leftClosed:true, rightClosed:false }
  ]
});
</script>

6. Uso automático mínimo

<div class="recta-intervalos-auto"
     data-config='{
       "range":["-5","5"],
       "majorStep":"1",
       "intervals":[
         {"id":"A","from":"-2","to":"3","leftClosed":true,"rightClosed":false}
       ]
     }'></div>

7. Atributos del modo automático

`class`	Tipo del contenedor.
`data-tipo`	Permite usar el modo genérico `recta-auto`.
`data-config`	Configuración JSON del dibujo.
`data-width`	Ancho lógico del canvas.
`data-height`	Alto lógico del canvas.

8. Selectores automáticos

.recta-intervalos-auto
.recta-numerica-auto
.recta-auto[data-tipo]

9. Rango y formato numérico

La propiedad range recibe dos extremos, por ejemplo:

"range":["-5","5"]

El motor puede interpretar números, fracciones y constantes como pi, π y e.

"range":["-pi","2*pi"]

majorStep también acepta fracciones o múltiplos simbólicos:

"majorStep":"1"
"majorStep":"1/2"
"majorStep":"pi/2"

10. Configuración de la recta

`lineMode`	`finite`, `infinite`, `ray-left`, `ray-right`.
`majorStep`	Paso principal.
`minorDivisions`	Cuántas subdivisiones tiene cada paso principal.
`labelMode`	`auto`, `decimal`, `fraction`.
`showMajorTicks`	Muestra marcas principales.
`showMinorTicks`	Muestra marcas secundarias.
`showMajorLabels`	Muestra etiquetas principales.
`showMinorLabels`	Muestra etiquetas secundarias.
`showEndLabels`	Muestra etiquetas en los extremos.
`showArrows`	Muestra flechas cuando la recta lo requiere.
`labelValues`	Lista opcional de valores concretos que sí se etiquetan.

11. Definición de intervalos

Cada intervalo se define dentro de intervals.

{
  "id":"A",
  "from":"-2",
  "to":"3",
  "leftClosed":true,
  "rightClosed":false
}

`id`	Identificador del intervalo.
`from`	Extremo izquierdo.
`to`	Extremo derecho.
`leftClosed`	Indica si el extremo izquierdo es cerrado.
`rightClosed`	Indica si el extremo derecho es cerrado.
`color`	Color de relleno de la banda.
`stroke`	Color del borde.
`lineWidth`	Grosor del borde.

12. Soluciones calculadas

La propiedad solutions permite dibujar resultados calculados a partir de los intervalos base.

{
  "id":"U1",
  "type":"union",
  "of":["A","B"]
}

{
  "id":"I1",
  "type":"intersection",
  "of":["A","B"]
}

`type`	`union` o `intersection`.
`of`	Lista de ids o índices de intervalos a combinar.
`fill`	Color de relleno de la solución.
`stroke`	Color del borde.
`pointClosedFill`	Color de puntos cerrados.
`pointOpenFill`	Color de puntos abiertos.
`pointStroke`	Borde de puntos.
`showEmptyText`	Si una intersección es vacía, puede mostrar ∅.
`emptyText`	Texto para la solución vacía.

13. Estilos globales

Dentro de style puedes ajustar colores y medidas.

Base de la recta	`axisColor`, `tickColor`, `labelColor`, `axisWidth`
Intervalos	`intervalFill`, `intervalStroke`, `intervalHeight`, `pointRadius`
Capas	`layerOffset`, `baseThicknessStep`
Soluciones	`unionFill`, `intersectionFill`, `solutionLineWidth`, `solutionHeightExtra`
Texto vacío	`emptySolutionText`, `emptySolutionColor`, `emptySolutionFont`

14. Etiquetado selectivo

Si quieres mostrar solo algunas etiquetas, usa labelValues.

{
  "range":["-5","5"],
  "majorStep":"1",
  "labelValues":["-4","-2","0","2","4"]
}

15. Redibujar un contenedor automático

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

contenedor.setAttribute("data-config", JSON.stringify({
  range: ["-5","5"],
  majorStep: "1",
  intervals: [
    { id:"A", from:"-3", to:"1", leftClosed:true, rightClosed:false }
  ]
}));

RectaIntervalosAuto.redibujar(contenedor);

16. Archivo complementario

Abrir ejemplos