L'utilisation D3 avec un tableau multidimensionnel/objet

Question

J'ai un fichier JSON avec un format comme ce qui suit:

{ 
    "John":{ 
     "name":"John", 
     "counts":[ 1, 5, 10, 6 ] 
    }, 
    "Steve":{ 
     "name":"Steve", 
     "counts": [ 6, 4, 50, 40 ] 
    } 
} 

Je suis en train de faire une visualisation de D3 qui fait un tableau simple colonne pour ces chefs d'accusation , avec une étiquette de nom à gauche. Quand j'ai une série de données unique et un nom que je peux le faire comme ceci:

svg.selectAll("rect").data([ 1, 5, 10, 6 ]).enter().append("rect") 
      .attr("x",function(d,i) { return i*columnWidth; }) 
      .attr("y",function(d) { return (rowHeight-scale(d));}) 
      .attr("width",columnWidth) 
      .attr("height",function(d) { return snowScale(d); }); 

svg.selectAll("text").data("John").enter().append("text") 
     .text(function(d) { return d; }) 
     .attr("x",nameBuffer) 
     .attr("y",function(d,i) { return rowHeight; })    
     .attr("font-size", "14px"); 

Cela fonctionne pour une seule ligne avec les données fournies directement, avec l'étiquette de texte sur la gauche, puis une série de colonnes de largeur égale pour chaque point de données. Mais je commence juste avec D3, et je ne peux pas pour la vie de moi comprendre comment enchaîner quelque chose qui boucle à travers chaque objet et crée une nouvelle rangée pour chacun, en ajoutant au décalage vertical à chaque fois.

Comment puis-je faire une boucle, en créant un pour chaque objet dans le fichier, puis en créant les colonnes text + pour chaque ligne, tout en préservant les différentes valeurs imbriquées et les indices de tableau?

Answer 1

La clé pour atteindre ce que vous voulez est d'utiliser des sélections imbriquées. L'idée est de passer tout votre objet de données au premier niveau et de créer un groupe SVG pour les éléments. Pour chacun de ces éléments, la visualisation réelle est ensuite ajoutée de la même manière que ce que vous faites actuellement.

Regardez Mike's tutorial on nested selections. N'oubliez pas de remplacer vos appels de données actuellement codés en dur par les éléments respectifs, par ex. .data(d.counts) au lieu de .enter([1, 5, 10, 6]).