2011-06-08 10 views
5

Estoy buscando un control de javascript/CSS de estilo JQuery que permita al usuario profundizar en el funcionamiento de una expresión.Buscando el control web de estilo JQuery para desglosar una estructura de datos de árbol

Por ejemplo, imaginemos que tenemos la siguiente expresión:

(2+3) × (4+5) + Max(22, 31, 16, 62, 40) 

Este evaluaría la siguiente manera:

 
    (((2+3)×(4+5))+Max(22, 31, 16, 62, 40)) 
⇒ ((5×9)+62) 
⇒ (45+62) 
⇒ 107 

me gustaría presentar estos pasos intermedios de tal manera que el usuario puede profundizar en una rama de evaluación particular para descubrir las entradas que produjeron un valor particular.

He jugado con la idea de manipular el funcionamiento de la expresión en una estructura de árbol, quizás con evaluaciones intermedias insertadas (mostradas en azul en el ejemplo). Sin embargo, me preocupa que la audiencia a la que apunto este software pueda encontrar esto un poco intimidante.

p. Ej. Expression Tree

Una alternativa, la representación más amigable podría ser permitir en el lugar perforar hacia abajo como se muestra en este ejemplo:

La expresión inicialmente parece a esto: hace clic Expression's initial state

usuario la " Botón 107 'que cambia el control a este:

View after the '107' button has been pressed

usuario hace clic en el botón de '62', que cambia el control a esto:

View after the '62' button has been pressed

Antes de escribir mi propio control pensé que puede haber un control existente disponible que podría ser utilizado para este propósito . Alternativamente, agradecería cualquier sugerencia alternativa para representar estos datos de una manera que sea más intuitiva.

Respuesta

4

No pude encontrar un control que funcionó como lo describí anteriormente, así que creé uno. La fuente está disponible en: http://github.com/Wheelies/expression-explorer

El control se inicializa con una estructura de datos de árbol que puede ser navegada por el usuario.

La expresión (((2+3)×(4+5))+Max(20+2, 31, 16, 62, 40)) se puede analizar en un árbol que puede ser explorado como sigue:

107

usuario hace clic en el botón [107] que cambia el control a esto:

45+62

Se hace clic en el botón [62], que cambia el control a este:

45 + Max(22, 31, 16, 62, 40)

usuario hace clic ahora [22]

45 + Max((20+2), 31, 16, 62, 40)

Tenga en cuenta que la expresión de análisis no está a cargo de este control. Además, no he implementado el control como un verdadero plugin JQuery aún

Cuestiones relacionadas