Accès à la structure JSON imbriquée dans D3

Question

J'essaie de créer un ensemble de graphiques en utilisant D3 et je n'arrive pas à trouver comment accéder aux structures de données imbriquées dans mon JSON. Les données ressemble à ceci (tronquée):

{ "date": "20120927", 
    "hours": [ 
      { "hour": 0, "hits": 823896 }, 
      { "hour": 1, "hits": 654335 }, 
      { "hour": 2, "hits": 548812 }, 
      { "hour": 3, "hits": 512863 }, 
      { "hour": 4, "hits": 500639 } 
      ], 
    "totalHits": "32,870,234", 
    "maxHits": "2,119,767", 
    "maxHour": 12, 
    "minHits": "553,821", 
    "minHour": 3 } 

{ "date": "20120928", 
    "hours": [ 
      { "hour": 0, "hits": 1235923 }, 
      { "hour": 1, "hits": 654335 }, 
      { "hour": 2, "hits": 1103849 }, 
      { "hour": 3, "hits": 512863 }, 
      { "hour": 4, "hits": 488506 } 
      ], 
    "totalHits": "32,870,234", 
    "maxHits": "2,119,767", 
    "maxHour": 12, 
    "minHits": "553,821", 
    "minHour": 3 } 

Ce que je veux éventuellement faire est de créer plusieurs graphiques radar, un pour chaque jour, modélisant les résultats pour chaque heure. Mais j'ai du mal à entrer dans le tableau des "heures". Je peux, par exemple, obtenir une liste de toutes les dates, comme ceci:

d3.select("body") 
    .append("ul") 
    .selectAll("li") 
    .data(data) 
    .enter() 
    .append("li") 
    .text(function (d,i) { 
    return d.date; 
    }); 

Mais je ne peux pas à quelque chose de plus imbriqué. Quelqu'un peut-il m'aider à me diriger dans la bonne direction?

Answer 1

En supposant data est un tableau à deux éléments contenant vos deux objets, vous pouvez faire quelque chose comme ceci:

d3.select("body").append("ul").selectAll("li") 
    .data(data) // top level data-join 
    .enter().append("li") 
    .each(function() { 
     var li = d3.select(this); 

     li.append("p") 
      .text(function(d) { return d.date; }); 

     li.append("ul").selectAll("li") 
      .data(function(d) { return d.hours; }) // second level data-join 
     .enter().append("li") 
      .text(function(d) { return d.hour + ": " + d.hits; }); 
    }); 

Cela vous donne une structure imbriquée comme ceci:

<ul> 
    <li> 
    <p>20120927</p> 
    <ul> 
     <li>0: 823896</li> 
     <li>1: 654335</li> 
     <li>2: 548812</li> 
     <li>3: 512863</li> 
     <li>4: 500639</li> 
    </ul> 
    </li> 
    <li> 
    <p>20120928</p> 
    <ul> 
     <li>0: 1235923</li> 
     <li>1: 654335</li> 
     <li>2: 1103849</li> 
     <li>3: 512863</li> 
     <li>4: 488506</li> 
    </ul> 
    </li> 
</ul> 

Voir aussi Mike article Nested Selections.