Javascript Girl
  1. Javascript Girl
  3. Comment convertir au format JSON de D3?
Intereting Posts
Impossible d'obtenir une propriété de référence non définie ou nulle – application Windows 8 JS / CSS Comment utiliser l'Adjectif Angulaire UI Bootstrap Datepicker sous forme unique? Code source encodeURIComponent algorithme Fancybox – Ajax Image Gallery Déserialiser les dates JSON sans timezone Symfony 2 ajoute Javascripts, une seule demande Faire partie d'une image avec JavaScript Boucle et obtenez une paire clé / valeur pour le tableau JSON en utilisant jQuery Est-ce que $ (document) est nécessaire si je pose tout mon JavaScript au bas de la page? Bootstrap 3> essayant de créer des colonnes avec des hauteurs égales La détection d'événement de changement iFrame src? Comment stocker des fichiers avec JS? Jquery select element par xpath Vérifiez si l'objet est un objet jQuery La cupidité se comporte-elle différemment en JavaScript?

Comment convertir au format JSON de D3?

Tout en suivant de nombreux exemples D3, les données sont habituellement formatées dans le format donné dans flare.json : 

{ "name": "flare", "children": [ { "name": "analytics", "children": [ { "name": "cluster", "children": [ {"name": "AgglomerativeCluster", "size": 3938}, :

J'ai une liste de contiguïté comme suit: 

 A1 A2 A2 A3 A2 A4

Que je veux convertir au format ci-dessus. Actuellement, je le fais sur le côté du serveur, mais existe-t-il un moyen d'y parvenir en utilisant les fonctions de D3? J'ai trouvé un ici , mais l'approche semble nécessiter une modification de la bibliothèque principale d3 que je ne suis pas en faveur de la facilité de maintenance. Aucune suggestion?

Il n'y a pas de format prescrit, car vous pouvez normalement redéfinir vos données via diverses fonctions d'accesseur (telles que hiérarchie et enfants ) et array.map . Mais le format que vous avez cité est probablement la représentation la plus appropriée pour les arbres car cela fonctionne avec les accesseurs par défaut.

La première question est de savoir si vous avez l'intention d'afficher un graphique ou un arbre . Pour les graphiques, la structure de données est définie en termes de nœuds et de liens . Pour les arbres, l'entrée de la mise en page est le noeud racine, qui peut avoir un ensemble de noeuds enfants et dont les noeuds feuille ont une valeur associée.

Si vous souhaitez afficher un graphique , et tout ce que vous avez est une liste de bords, vous voudrez itérer sur les bords afin de produire un ensemble de nœuds et un ensemble de liens. Dire que vous aviez un fichier appelé "graph.csv": 

 source,target A1,A2 A2,A3 A2,A4

Vous pouvez charger ce fichier en utilisant d3.csv et ensuite créer un ensemble 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 passer ces nœuds et les liens vers la disposition de la force pour visualiser le graphique:

Si vous souhaitez produire un arbre à la place, vous devrez faire une forme de transformation de données légèrement différente 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}); } });

Ainsi:

D3 ne nécessite pas de format spécifique. Tout dépend de votre application. Vous pouvez certainement convertir une liste d'adjacence vers le format utilisé dans flare.json, mais cela serait à nouveau un code spécifique à l'application. En général, vous ne pouvez pas le faire en tant que listes de contiguïté en tant que telles, ne disposez pas d'éléments "tête" ou "racine" dont vous auriez besoin pour créer un arbre. En outre, vous devriez gérer des cycles, des orphelins, etc. séparément.

Étant donné que vous effectuez actuellement la conversion du côté du serveur, je serais tenté de dire que "si ce n'est pas cassé, ne le corrigez pas";)