web-dev-qa-db-fra.com

Comment créez-vous un arbre généalogique dans d3.js?

Je travaille actuellement sur une petite expérience de généalogie et j'aimerais implémenter un arbre généalogique simple, comme dans l'image ci-dessous.

Jusqu'à présent, les meilleurs résultats de recherche pour cette activité ont uniquement donné des exemples dans lesquels un enfant ne peut avoir qu'un nœud parent. Mais ce qu’il me faut, c’est la capacité de créer des liens entre entités (de père en mère) et des liens entre noeuds et autres liens (de l’enfant au lien père-mère) . Actuellement, je n’ai pas de schéma de données fixe pour ce.

J'ai choisi d3.js pour cela parce qu'il semble capable de faire le travail . Je ne sais pas comment ni même par où commencer. Les didacticiels sur d3.js ne couvrent que les graphiques standard, tels que les graphiques à barres.

J'espère que quelqu'un peut me aider.

This is how the result should look like

javascriptd3.jschartsfamily-treegenealogy
49
user659025

Mon approche est la suivante:

Prenons l'exemple que vous avez illustré dans la figure ci-jointe:

Jenny Of Oldstones est aussi l'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 lui.

Pour ce faire, définissez le nœud comme suit: no_parent: true dans le nœud JSON Exemple:

//Here Q will not have a parent
 {
            name: "Q",
            id: 16,
            no_parent: true
 }

Dans le code, vérifiez la _elbow fonction_, ce qui empêche de tracer la ligne entre elle et son parent:

if (d.target.no_parent) {
    return "M0,0L0,0";
}

Le scénario suivant est le lien entre le nœud Aerys II et Rahella ce nœud a son ensemble d'enfants.

  • J'ai créé un nœud entre eux qui est marqué comme hidden: true,
  • Je fais le display:none pour un tel noeud. Il semble que les enfants viennent de la ligne entre le noeud Aerys II et Rahella

JSON Exemple: 

//this node will not be displayed
{ name: "",
    id: 2,
    no_parent: true,
    hidden: true,
    children: [....]

    }

Dans le code, vérifiez l'endroit où je crée les rectangles, le code ci-dessous masque le nœud:

    .attr("display", function (d) {
    if (d.hidden) {
        return "none"
    } else {
        return ""
    };
})

Le code complet se trouve ici: http://jsfiddle.net/cyril123/0vbtvoon/22/

Dans l'exemple ci-dessus, j'ai utilisé les noms de nœuds A/B/C ... mais vous pouvez le modifier selon vos besoins. Vous devrez 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, veuillez commenter, je serai ravi de le préciser.

38
Cyril

dTree est une bibliothèque open source construite sur D3 qui crée des arbres généalogiques (ou des graphiques hiérarchiques similaires). 

Il gère les parties fastidieuses de la génération manuelle du graphe D3 et utilise un format de données JSON simple: 

[{
  name: "Father",
  marriages: [{
    spouse: {
      name: "Mother",
    },
    children: [{
      name: "Child",
    }]
  }]
}]

Si vous souhaitez le modifier, prend en charge le rappel pour le rendu de noeud et le gestionnaire d’événements. Enfin, la bibliothèque est en développement en 2016 et les demandes de tirage sont les bienvenues.

AVERTISSEMENT: Je suis l'auteur de dTree. J'ai créé la bibliothèque après une recherche sur le Web, comme vous l'avez fait, sans rien trouver à mon goût.

9
Erik

Je sais que cette question est plutôt ancienne, mais si vous êtes toujours intéressé, jetez un coup d’œil à mon échantillon ici .

9
Rickard

J'ai essayé dtree et j'ai aimé. Cependant, lorsque vous ajoutez plusieurs générations, l'affichage horizontal peut rendre l'affichage global très volumineux et difficile à manier. Au lieu de cela, j'ai utilisé le Reingold – Tilford Tree . L’un des inconvénients de cet arbre est que chaque nœud ne peut avoir qu’un seul parent: les conjoints ne peuvent pas être affichés côte à côte: pour dépasser cette limitation, j’ai modifié le JSON afin de regrouper les conjoints en une seule entité (ex: "mari - femme") juste avant d’envoyer à l'arbre.

3
Vivek Kodira

Répondre 3 ans après la question.

Il y a maintenant un graphe de l'arbre généalogique de Mike

 enter image description here

https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295

Ensuite, il y a ce d3.tree - Un arbre généalogique https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295

Vous pouvez également réessayer D3 Tidy Tree de Mike https://beta.observablehq.com/@mbostock/d3-tidy-tree

0
kiranvj