library - ¿Puedo crear un diagrama de flujo(sin diagrama de árbol) utilizando D3.js?

javascript tree diagram

Question

puedo crear un diagrama de flujo como este:

¿Empezar a formar un objeto json usando la biblioteca D3.js ?

¿Cómo debería ser la estructura de json?

¿Tienes algún ejemplo que pueda analizar?

Muchas gracias.

Answer 1

Creo que esto te da lo que necesitas:

http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html

Answer 2

En mi humilde opinión, D3.js no es muy adecuado para este tipo de visualización. La visualización es demasiado compleja para hacer un mapeo simple de datos a SVG (y eso es lo que D3.js es principalmente para: generar DOM (documentos) desde datos a través de mapeos concisos).

Puede solucionar esas limitaciones introduciendo más lógica intermedia para que los datos no se muestren directamente, sino que se cree un modelo, se realicen algunos cálculos y el resultado se transforme a SVG mediante D3. Esto es lo que dagre está tratando de hacer y funciona bastante bien.

Sin embargo, su gráfico tiene algunas restricciones especiales que actualmente no son compatibles con implementaciones más simples de ese algoritmo de diseño: en la última capa obtiene una representación de tipo horquilla. En la capa "decisión", asigna restricciones a los bordes para que salgan a la izquierda y a la derecha de los nodos, también restringe los nodos de decisión para que estén en la misma capa.

Toda esta información no es visible en la estructura del gráfico en sí. Por lo tanto, debe anotar esa información en su modelo y decirle al algoritmo de diseño que respete estas restricciones. Según mi conocimiento, solo las implementaciones comerciales de bibliotecas de dibujo de gráficos admiten actualmente estas características avanzadas de diseño.

yFiles para HTML es una biblioteca de este tipo: en esta demostración puede usar el siguiente JSON para obtener un resultado como este:

Cambie a la entrada del cuadro combinado en la parte superior: "5 - Objetos complejos + Etiquetas perimetrales"

Y modifique el JSON en las secciones Orígenes de nodos, Origen de bordes y Plantilla de nodo de la siguiente manera:

Fuente Nodos

{
0:{''name'':''Start'',color:''green''}, 
1:{''name'':''Read A,B,C'',color:''yellow''}, 
2:{''name'':''Is B>C?'',color:''green''},
3:{''name'':''Is A>B?'',color:''green''},
4:{''name'':''Is A>C?'',color:''green''},
5:{''name'':''Print B'',color:''green''},
6:{''name'':''Print C'',color:''green''},
7:{''name'':''Print C'',color:''green''},
8:{''name'':''Print A'',color:''green''},
9:{''name'':''End'',color:''red''}
}

Fuente de borde

[
{from:''0'', to:''1'', label:''''}, 
{from:''1'', to:''3'', label:''''}, 
{from:''3'', to:''2'', label:''No''}, 
{from:''3'', to:''4'', label:''Yes''},
{from:''2'', to:''5'', label:''Yes''},
{from:''2'', to:''6'', label:''No''},
{from:''4'', to:''7'', label:''No''},
{from:''4'', to:''8'', label:''Yes''},
{from:''5'', to:''9'', label:''''},
{from:''6'', to:''9'', label:''''},
{from:''7'', to:''9'', label:''''},
{from:''8'', to:''9'', label:''''}
]

Modelo

<rect fill=''{Binding color}'' stroke=''LightBlue'' stroke-width=''2'' 
    width=''{TemplateBinding width}'' 
    height=''{TemplateBinding height}''></rect>
<text transform=''translate(10 20)'' data-content=''{Binding name}''   
    style=''font-size:18px; font-family:Arial; fill:#000; text-anchor: left;
    dominant-baseline: central;''></text>

Tenga en cuenta que también es posible usar un tipo diferente de JSON (como muestra la demostración). No creo que el formato JSON vaya a ser un problema de ninguna manera y, como puede ver, obtiene un resultado decente, pero aún así las restricciones que mencioné no se han considerado y agregado al JSON. Lamentablemente, la adición de estas restricciones no se puede hacer a través de la interfaz de demostración que estoy usando anteriormente en este momento, pero debe hacerse agregando más código al código fuente real de la demostración. Puede ver cómo funcionan estas restricciones en otra demostración (aunque sin JSON) en esta demostración de diseño interactivo .

Poniendo todas las partes y piezas juntas, puede lograr fácilmente este tipo de resultado, automáticamente:

El mismo ejemplo se puede encontrar y probar de forma interactiva en esta demostración de diseño de diagrama de flujo interactivo .

Descargo de responsabilidad : trabajo para la compañía que crea esa biblioteca, sin embargo, en SO / SE no represento a mi empleador. Mis publicaciones son mías.

Answer 3

He estado investigando esto hoy y flowchart.js parece prometedor. Admite los puntos de inicio y finalización, las operaciones y las condiciones. Puede controlar de qué lado de los elementos dibujados salen las líneas, etc.

http://adrai.github.io/flowchart.js/

Answer 4

¿Puedo crear un diagrama de flujo como este?

D3 es capaz de hacerlo.

¿Empezar a formar un objeto json usando la biblioteca D3.js?

Sí

¿Cómo debería ser la estructura de json?

Depende de cómo te acerques al proyecto. Estoy usando el diseño de la fuerza y ​​eliminando la fuerza, por lo que mi JSON es

{node:
    [{
        id: 1,
        title: ''title''
    }],
 link: 
    [{
        source: 0,
        target: 1
    }]
 }

¿Tienes algún ejemplo que pueda analizar?

Para tu inspiracion

• http://marvl.infotech.monash.edu/webcola/
• http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/

Punto de partida https://github.com/mbostock/d3/wiki/Force-Layout

cómo envolver su texto en el bloque http://bl.ocks.org/mbostock/7555321

D3.js no es muy adecuado para este tipo de visualización. La visualización es demasiado compleja para hacer un mapeo simple de datos a SVG

No estoy seguro de por qué, pero los diagramas de flujo de IMO son uno de los tipos más simples de diagramas, bloques y líneas que los conectan. D3 tiene medios incorporados para dibujar nodos y conectores. Sí, eso no está listo para usar, solución lista para usar. Pero todo lo que necesitas hacer es aprender y personalizar.