Comment créer un arbre généalogique en d3.js?
je travaille actuellement sur une petite expérience généalogique et je voudrais mettre en œuvre un arbre généalogique simple comme sur la photo ci-dessous.
les meilleurs résultats de recherche obtenus jusqu'à présent n'ont donné que des exemples où un enfant ne peut avoir qu'un noeud parent. Mais ce dont j'ai besoin, c'est la capacité de créer des liens entre les entités (du père à la mère) et des liens entre les noeuds et d'autres liens (de l'enfant au lien père-mère). Actuellement je n'ai pas de fixe schéma de données pour cela.
j'ai choisi d3.js pour ce parce qu'il ressemble serait capable de faire le travail . Je ne sais juste pas comment ou même par où commencer. Tutoriels sur d3.js ne couvre que les graphiques standards comme les graphiques à barres.
j'espère que quelqu'un pourra m'aider.
6 réponses
Mon approche est la suivante:
prenons l'exemple que vous avez illustré dans la figure ci-jointe:
Jenny Of Oldstones est aussi un enfant de Aegon V mais la différence entre cet enfant et les autres enfants D'Aegon v est que dans ce cas, je ne fais pas le lien entre elle.
ceci est fait en définissant le noeud comme no_parent: true dans le noeud JSON exemple:
//Here Q will not have a parent
{
name: "Q",
id: 16,
no_parent: true
}
dans le code, cochez la fonction _elbow qui consiste à ne pas tracer de ligne entre elle et son parent:
if (d.target.no_parent) {
return "M0,0L0,0";
}
suivant scénario est le lien allant entre le noeud Aerys II et Rahella ce noeud a son ensemble d'enfants.
- j'ai créé un noeud entre eux qui est marqué comme
hidden: true, - je fais le
display:nonepour un tel noeud. Il semble que les enfants viennent de la ligne entre le noeud Aerys II et Rahella
JSON Example:
//this node will not be displayed
{ name: "",
id: 2,
no_parent: true,
hidden: true,
children: [....]
}
dans le code vérifiez l'endroit où je fais les rectangles, le code ci-dessous cache le noeud:
.attr("display", function (d) {
if (d.hidden) {
return "none"
} else {
return ""
};
})
le code complet est ici: http://jsfiddle.net/cyril123/0vbtvoon/22 /
dans l'exemple ci-dessus, j'ai utilisé les noms de noeuds A/B / C... mais vous pouvez le modifier selon vos besoins. Vous aurez besoin de centrer le texte.
j'ai ajouté des commentaires au code pour vous aider à comprendre le flux. Juste au cas où vous n'êtes pas clair sur un point s'il vous plaît commentaire je serai heureux de clarifier.
dtree est une bibliothèque libre construite sur D3 qui crée des arbres de famille (ou des graphiques hiérarchiques similaires).
il traite les parties gênantes de la production manuelle du graphique D3 et utilise un format de données JSON simple:
[{
name: "Father",
marriages: [{
spouse: {
name: "Mother",
},
children: [{
name: "Child",
}]
}]
}]
si vous êtes intéressé à le modifier, il prend en charge le callback pour le rendu de noeuds et le gestionnaire d'événements. Enfin, la Bibliothèque est à partir de 2016 en cours de développement et les demandes pull sont accueillir.
clause de non-responsabilité: je suis l'auteur de dTree. J'ai créé la bibliothèque après avoir cherché sur le web comme vous l'avez fait et n'avoir rien trouvé à mon goût.
the not-as-good news: la recherche que j'ai faite montre qu'il n'y a pas de bibliothèque out-of-the-box d3 qui accomplit directement ceci sans une certaine personnalisation.
Le bon news: Il y a eu quelques autres gens qui se sont penchés sur cette question et ont trouvé quelques grands points de départ! Je me rends compte que ce n'est pas une solution complète à l'ensemble de la tâche à accomplir, mais il semble de votre question qu'une grande partie de votre difficulté jusqu'à présent a été simplement de comprendre où commencer (par exemple "tutoriels about d3.js ne couvre que les graphiques standards comme les graphiques à barres."). En l'absence de quoi que ce soit de mieux, je vais au moins répondre à cette partie.
tout D'abord, dans la réponse à ce poteau de débordement lié à partir de quelques années en arrière, inanutshellus fournit quelques grands outils d3 que sont disponibles et pourraient être de utiliser ici. Avec un peu de personnalisation légère / extension, ils devraient être en mesure de vous obtenir où vous allez relativement rapidement. Pour la postérité, la réponse d'inanutshellus est reproduite ici:
il y a quelques options, mais je crois que chacune nécessiterait un peu de travail. Il serait utile de disposer d'une norme unique pour la représentation un arbre généalogique à JSON. J'ai récemment remarqué que geni.com a un API en profondeur pour cela. Peut-être que le codage par rapport à leur API être un bonne idée pour la réutilisabilité...
-- Généalogie arbre --
L'Arbre Généalogique peut-être suffisant pour vos besoins. Tu ferais de la loi de linkable, où si vous cliquiez sur leur nom le graphique serait redessiné de sorte que vous pourriez voir leur lignée.
-- Arbre De Disposition Des Crochets --
similaire à L'arbre généalogique, mais bidirectionnel, ce disposition des crochets Arbre "voici mes parents, mes grands-parents, mes enfants., petits-enfants" type de vue. Comme le Pedigree, vous feriez des individus reliés pour re-centrer le support sur ce noeud.
-- Disposition Basée Sur La Force --
il y a des maquettes intéressantes basées sur la force qui semblent prometteuses. Jetez un oeil à cet exemple d'un disposition basée sur la force avec des étiquettes intelligentes . Un ajustement à la l'algorithme de détermination de la "force" pourrait en faire un très bel arbre, avec des générations plus anciennes au-dessus ou au-dessous des nouvelles.
-- Cluster Dendogram (pourquoi il ne parvient pas) --
le d3.js layouts que j'ai vu qui se prêteraient le mieux à la famille les arbres supposent qu'un seul noeud est le parent, alors que vous devez représenter le parent comme la combinaison de (visuellement un " T " entre) deux nœuds: un nœud qui est un membre de votre arbre, et un flottant nœud qui représente la loi. Ajustement d'un dendogramme de cluster pour faire cela devrait être faisable, mais pas sans modifications importantes.
si vous ou quelqu'un d'autre vous attaquez à ça, faites-le moi savoir. J'avais aimer voir (et bénéficier de) le travail et peut être en mesure de contribuer pour elle, si possible.
en termes de mise en œuvre concrète, mj8591 a demandé cette question concernant un généalogie semblable à un problème différent. Cependant, heureusement pour vous cette question inclut un violon (tout le code js) qui a la plupart ou tous les composants dont vous avez besoin, et la réponse de mdml inclut un autre violon qui ajoute un peu plus de "cliquabilité" granulaire à chaque noeud.
encore une fois, ce n'est rien automagic mais espérons que ces ressources sont suffisantes pour vous obtenir un bon départ!
j'ai essayé dl'arbre et j'ai bien aimé. Toutefois, lorsque vous ajoutez plusieurs générations, l'affichage à l'horizontale peut rendre l'ensemble d'affichage très grand et lourd. Au lieu de cela, j'ai utilisé le Reingold–Tilford Tree . Un inconvénient de cet arbre est que chaque noeud ne peut avoir qu'un seul parent: les conjoints ne peuvent pas être affichés les uns à côté des autres: pour dépasser cette limitation, j'ai modifié le JSON pour combiner les conjoints en une seule entité (ex: "mari - femme" ) juste avant de l'envoyer à l'arbre.
je sais que cette question est assez ancienne, mais si quelqu'un est encore intéressé, s'il vous plaît jeter un oeil à mon échantillon ici .
Je ne sais pas si cela peut vous aider, parce que vous avez dit que vous alliez utiliser d3.js mais il y a un autre outil que vous pourriez vouloir examiner en utilisant appelé jsplumb. Il semble parfait pour ce genre de projet: page d'accueil . Ils ont également quelques tutoriels décents. Il y a un de plus comme docs , et un autre plus interactif .
comme je l'ai dit, s'il n'est pas trop tard pour changer technologies, cela pourrait valoir la peine d'essayer. Il est tout html, css, et javascript, donc il ne devrait pas être une transition difficile.