Il n'y a pas de format prescrit, car vous pouvez généralement redéfinir vos données à l'aide de diverses fonctions d'accès (telles que la fonction hiérarchie.enfants ) et tableau.map . Mais le format que vous avez cité est probablement la représentation la plus pratique pour les arbres car elle fonctionne avec les accesseurs par défaut.
La première question est de savoir si vous avez l'intention d'afficher une graphique ou un arbre . Pour les graphes, la structure de données est définie en termes de nœuds y liens . Pour les arbres, l'entrée de la disposition est le nœud Root, qui peut avoir un tableau de nœuds enfants et dont les nœuds feuilles sont associés à un valeur .
Si vous voulez afficher un graphique et tout ce que vous avez est une liste d'arêtes, alors vous voudrez itérer sur les arêtes afin de produire un tableau de nœuds et un tableau de liens. Supposons que vous ayez un fichier appelé "graph.csv" :
source,target
A1,A2
A2,A3
A2,A4
Vous pouvez charger ce fichier en utilisant d3.csv et produire ensuite un tableau de nœuds et de liens :
d3.csv("graph.csv", function(links) {
var nodesByName = {};
// Create nodes for each unique source and target.
links.forEach(function(link) {
link.source = nodeByName(link.source);
link.target = nodeByName(link.target);
});
// Extract the array of nodes from the map by name.
var nodes = d3.values(nodeByName);
function nodeByName(name) {
return nodesByName[name] || (nodesByName[name] = {name: name});
}
});
Vous pouvez ensuite transmettre ces nœuds et ces liens à la disposition des forces pour visualiser le graphique :
Si vous voulez produire un arbre à la place, vous devrez effectuer une forme légèrement différente de transformation des données pour accumuler les nœuds enfants pour chaque parent.
d3.csv("graph.csv", function(links) {
var nodesByName = {};
// Create nodes for each unique source and target.
links.forEach(function(link) {
var parent = link.source = nodeByName(link.source),
child = link.target = nodeByName(link.target);
if (parent.children) parent.children.push(child);
else parent.children = [child];
});
// Extract the root node.
var root = links[0].source;
function nodeByName(name) {
return nodesByName[name] || (nodesByName[name] = {name: name});
}
});
Comme ça :
