Organigramme de l'arbre, en ligne, dynamique, souple, photos - en D3

Je suis un noob en développement web. Je suis en train de créer un arbre hiérarchique de l'entreprise l'organigramme. J'ai essayé à la fois de google visualisation graphique et Mike Bostock est D3 Reingold arbre.

Je veux que ces caractéristiques :

  • structure de l'arbre : "top-down" (google) ou gauche-droite (D3)
  • en ligne/dynamique : visible dans le navigateur et en mesure de lire les données json (les deux google & D3), pas statique visio ou ppt diagramme
  • réductible : en mesure de masquer les sous-arbres (les deux)
  • espace-ajustement : les nœuds doivent remplir la zone visible, à réduire le défilement (seulement D3)
  • attributs : nom complet, titre & peut-être l'image (seulement google)

Ci-dessus j'ai marqué l'outil qui permet les fonctions qui, autant que je sache.

Je préfère le D3 version parce qu'il a l'air cool.

Je peux modifier la .json afin d'inclure d'autres champs (titre, url de la photo, etc.) - voici une exemple

Ma question est - comment puis-je modifier le D3 code pour afficher un nom de l'employé, puis le titre dans la ligne suivante, et peut-être trop en photo ?

Ou si ce n'est pas possible - comment puis-je modifier le google code pour ajuster automatiquement l'espacement, de sorte que tous les enfants d'un nœud sont proches, et que je n'ai pas à défiler horizontalement ?

Je ne sais pas D3.js assez bien pour répondre à votre question. Je sais que la Google API Graphiques assez bien, bien, et... disons simplement que, sur la base de la façon dont vous avez présenté votre question que la modification de l'espacement sur l'organigramme n'est pas quelque chose que vous voulez essayer. Le rendu de l'organigramme n'est en fait qu'un très compliquée Tableau HTML avec un peu de fantaisie CSS appliqué. Ce n'est pas très flexible. Il serait assez fou CSS ou jQuery vaudou de lui faire faire autre chose que ce qu'elle fait déjà.
oui, je veux google charts pour ajuster l'espacement automatiquement - j'ai reformulé la question here avec des exemples de code.
Ce que je veux dire, c'est, pour faire ce que vous décrivez, vous auriez du écrire quelque chose de presque aussi complexe que ce que la Google API Graphiques pour dessiner ce qu'il est maintenant. Je ne sais pas beaucoup sur la D3, mais je sais que c'est open source et extensible. Google Charts ne l'est pas. Vous êtes probablement mieux avec D3.js dans ce cas. Google Charts est grand et facile à utiliser aussi longtemps que vous êtes prêt à vivre avec ce que Google vous donne pour gratuit.

OriginalL'auteur d-_-b | 2015-06-18

  1. 0

    Si vous le souhaitez pour créer votre projet avec D3js, suffit d'utiliser la script codes de cette et remplacerd3.json("/mbostock/raw/4063550/flare.json", function(error, flare) : 

    d3.json("yourJsonFile/jsonFileName.json", function(error, flare)

    La jsonFileName.json est personnalisée fichier json comme ce exemple.
    Aussi, vous pouvez insérer le nom de vos images dans le fichier json et remplacer le img balise src.

    Je n'était probablement pas précisé plus haut.. j'ai déjà modifié le code pour lire mon exemple .json au lieu de l'éruption.json. Mais comment puis-je imprimer les champs supplémentaires ? pour, par exemple, dans la Ligne 96, j'ai concaténé titre & nom text(function(d) { return d.name+' , '+d.title; }) , mais comment puis-je ajouter une image src ? Je préfère de chaque valeur dans une nouvelle ligne.
    D3 est très flexible et vous pouvez personnaliser vos données comme vous le souhaitez. Il y a une fonction que vous pouvez ajouter chaque balise html comme img la append() fonction. Juste besoin d'écrire ce code d3.select("body").append("img") et vous pouvez modifier les attributs avec attr(), Afin de mettre à jour notre code comme ceci: d3.select("body").append("img").attr("src",'srcPath+name'). Il y a un point que je dois mentionner, vous pouvez créer séparés des balises et de changer la position d'eux avec attr("transform","translate("+x+","+y")" la x,y pourrait être n'importe quelle position. Vous ne pouvez pas ajouter le img balise à l'intérieur de la svg.
    Cette lien vous aideront à en apprendre d3.js. En profiter.

    OriginalL'auteur Gabriel