w3school used that specify must filled examples ejemplos create chart attribute javascript graph canvas svg

javascript - used - ¿Biblioteca para gráficos de árboles basados en la web Canvas/SVG con algoritmo de diseño?



in html, which attribute is used to specify that an input field must be filled out? (5)

Estoy buscando una biblioteca que pueda dibujar gráficos de árboles interactivos (es decir, nodos seleccionables).

Algo así, pero con texto en los cuadros de nodo (es decir, los nodos serían de anchura y altura variables).

Canviz no tiene una versión estable, y por lo que puedo decir, ProtoVis no puede hacer nodos de texto y solo puede hacer nodos monoparentales con diseños de árbol. ¿Alguien sabe de alguna biblioteca para hacer esto en un navegador?

¿Has mirado JIT todavía? Hice algunos trabajos con su gráfica radial, y fue una cincha.

Dado que esa imagen en la publicación original en realidad fue creada por un producto de la misma familia de productos, me gustaría agregar que "yFiles para HTML" también está disponible comercialmente, desde 2012.

La imagen de arriba ha sido generada por la variante de Java de esa biblioteca. La variante de biblioteca de Javascript admite todos los algoritmos de diseño que admite la variante de Java, con las mismas propiedades y capacidades de personalización. Se implementan en Javascript y no requieren un componente de servidor activo.

La biblioteca usa SVG como el backend de renderizado de manera predeterminada, pero también se pueden incluir representaciones basadas en Canvas. Vea este navegador de demostración en vivo para ver un ejemplo que muestra un gráfico similar (se requiere un navegador compatible con HTML5).

Descargo de responsabilidad : trabajo para la compañía que crea esa biblioteca, pero en SO / SE no represento a mi empleador.

Esta pregunta es bastante antigua y bastante alta en los resultados de Google, así que pensé en actualizarla. GraphVis hace exactamente lo que quiere en una aplicación de escritorio, basada en Java Swing, pero esto no es lo ideal. Su descripción es una gráfica jerárquica. Busqué en Google y encontré un dagre que se basa en d3. http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

Se puede hacer JIT para hacerlo, pero es muy engorroso y frágil.

Quizás te interese Cytoscape.js, una biblioteca de análisis y visualización de gráficos JS de código abierto. Tiene gestos incorporados, soporte para dispositivos táctiles y una API enriquecida que puede utilizar para integrarla en su aplicación web.

http://js.cytoscape.org

Cytoscape.js tiene un diseño de breadthfirst de banda breadthfirst para árboles y DAG, y este diseño es muy eficiente en cuanto al espacio.

También existe la extensión cytoscape-dagre para Cytoscape.js, que permite utilizar el excelente algoritmo de diseño Dagre tree / DAG: https://github.com/cytoscape/cytoscape.js-dagre

Dagre produce resultados muy estéticos.

Descargo de responsabilidad: trabajo en Cytoscape.js