Modifier la taille du nœud racine de la structure arborescente uniquement

Question

J'utilise le code trouvé ici: http://bl.ocks.org/1249394 pour ce diagramme.

Comment modifier la taille du nœud racine uniquement? Je veux que le nœud racine ait une taille différente de tous les nœuds enfants. Comment puis-je faire cela?

Answer 1

Fondamentalement, vous avez besoin d'une propriété que vous pouvez utiliser pour différencier les nœuds. On dirait qu'il existe une propriété parent existante qui peut être utilisée pour déterminer quand node est le root. Il suffit donc de modifier les fonctions d'ajout pour modifier le rayon du cercle si le nœud n'a pas de parent (c'est-à-dire, c'est la racine).

nodeEnter.append("svg:circle") 
    .attr("r", function(d) { return !d.parent ? 8.5 : 4.5; }) 
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) 
    .on("click", click); 

Vous pouvez voir un exemple fonctionnel à http://bl.ocks.org/3767443.

En général, si vous souhaitez modifier des nœuds particuliers que vous pouvez ajouter une nouvelle propriété aux nœuds que vous voulez être différent comme ceci:

{ 
    "name": "MAT", 
    "root": true, 
    "children": [ 
     { ... } ... 
    ] 
} 

Vous pouvez ensuite utiliser cette propriété pour modifier le noeud comme il est être ajouté (ici, je modifie le cercle, mais vous pouvez faire la même chose pour le texte quand il est ajouté). Notez qu'au lieu de coder en dur la taille du cercle à 4.5, j'utilise maintenant la propriété root pour agrandir les nœuds racine.

nodeEnter.append("svg:circle") 
    .attr("r", function(d) { return d.root ? 8 : 4.5; }) 
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) 
    .class(function(d) { return d.root ? 'root-node' : 'normal-node'; }) 
    .on("click", click); 

Si vous définissez également la classe comme je l'ai fait ci-dessus, vous pouvez alors utiliser le style CSS pour votre nœud racine mais vous voulez:

.root-node { 
    cursor: pointer; 
    fill: #fff; 
    stroke: green; 
    stroke-width: 3.5px; 
}