web-dev-qa-db-fra.com

Puis-je créer un organigramme (pas d'arborescence) à l'aide de D3.js

puis-je créer un organigramme comme celui-ci: enter image description here

à partir d'un objet json à l'aide de la bibliothèque D3.js ?

À quoi devrait ressembler la structure json?

Avez-vous un exemple que je peux analyser?

Merci beaucoup.

d3.jsflowchart
29
Dino

À mon humble avis, D3.js ne convient pas très bien à ce type de visualisation. La visualisation est tout simplement trop complexe pour effectuer un simple mappage des données vers SVG (et c'est principalement pour cela que D3.js: générer des DOM (documents) à partir de données via des mappages concis).

Vous pouvez contourner ces limitations en introduisant plus de logique entre les deux afin que les données ne soient pas directement affichées, mais plutôt qu'un modèle soit créé, que certains calculs soient effectués et que le résultat soit transformé en SVG par D3. C'est ce que dagre essaie de faire et cela fonctionne plutôt bien.

Cependant, votre graphique présente des contraintes spéciales qui ne sont actuellement pas prises en charge par les implémentations plus simples de cet algorithme de mise en page: dans la dernière couche, vous obtenez un rendu de type fork. Dans le calque "décision", vous affectez des contraintes aux arêtes afin qu'elles partent à gauche et à droite des nœuds, vous contraignez également les nœuds de décision à se trouver sur le même calque.

Toutes ces informations ne sont pas visibles dans la structure graphique elle-même. Pour cela, vous devez annoter ces informations dans votre modèle et dire à l'algorithme de mise en page de respecter ces contraintes. À ma connaissance, seules les implémentations de bibliothèques de dessin de graphiques commerciales prennent actuellement en charge ces fonctionnalités de mise en page avancées.

yFiles for HTML est une telle bibliothèque: Dans cette démo vous pouvez utiliser le JSON suivant pour obtenir un résultat comme celui-ci:

Screenshot of image created with yFiles for HTML demo

Basculez vers l'entrée combobox en haut: "5 - Objets complexes + étiquettes de bord"

Et modifiez le JSON dans les sections Nodes Sources, Edges Source et Node Template comme suit:

Source de nœuds

{
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'}
}

Source de bord

[
{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:''}
]

Gabarit

<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>

Notez que l'utilisation d'un autre type de JSON est également possible (comme le montre la démo). Je ne crois pas que le format JSON va être un problème du tout et comme vous pouvez le voir, vous obtenez un résultat décent, mais les contraintes que j'ai mentionnées n'ont toujours pas été prises en compte et ajoutées au JSON. Malheureusement, l'ajout de ces contraintes ne peut pas être effectué via l'interface de démonstration que j'utilise ci-dessus, mais doit être fait en ajoutant plus de code au code source réel de la démonstration. Vous pouvez voir comment ces contraintes fonctionnent dans une autre démo (mais sans le JSON) dans cette démo de mise en page interactive .

En rassemblant tous les morceaux, vous pouvez facilement obtenir ce type de résultat, automatiquement:

yFiles for HTML Flowchart Demo

Le même exemple peut être trouvé et testé de manière interactive dans cette démo de mise en page de l'organigramme interactif .

Clause de non-responsabilité : Je travaille pour l'entreprise qui crée cette bibliothèque, mais sur SO/SE, je ne représente pas mon employeur. Mes messages m'appartiennent.

20
Sebastian

puis-je créer un organigramme comme celui-ci?

D3 est capable de le faire.

à partir d'un objet json à l'aide de la bibliothèque D3.js?

Oui

À quoi devrait ressembler la structure json?

Cela dépend de la façon dont vous abordez le projet. J'utilise la disposition de force et je supprime la force, donc mon JSON est

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

Avez-vous un exemple que je peux analyser?

Pour votre inspiration

Point de départ https://github.com/mbostock/d3/wiki/Force-Layout

comment envelopper votre texte dans un bloc http://bl.ocks.org/mbostock/7555321

D3.js ne convient pas très bien à ce type de visualisation. La visualisation est tout simplement trop complexe pour effectuer un simple mappage des données vers SVG

Je ne sais pas pourquoi, mais les organigrammes de l'OMI sont l'un des types les plus simples de diagrammes, blocs et lignes qui les relient. D3 dispose de moyens intégrés pour dessiner des nœuds et des connecteurs. Oui, ce n'est pas prêt à l'emploi, solution prête à l'emploi. Mais il vous suffit d'apprendre et de personnaliser.

19
Edmund Sulzanok

Je me suis penché sur la question aujourd'hui et flowchart.js semble prometteur. Il prend en charge les points de départ et d'arrivée, les opérations et les conditions. Vous pouvez contrôler de quel côté des éléments dessinés les lignes sortent, etc.

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

4
Devon Holcombe