在D3中訪問嵌套的JSON結構

Question

我想使用D3創建一組圖形，並且我很難弄清楚如何在我的JSON中訪問嵌套的數據結構。數據看起來是這樣的（部分）：

{ "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 } 

我最終想要做的就是創建多個雷達圖，每天一個，描繪每個小時命中。但即使進入「小時」陣列，我也遇到了麻煩。我可以，例如，讓所有的日期列表，像這樣：

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

但我不能在任何多個嵌套得到。有人能幫助我指出正確的方向嗎？

Answer 1

假設data是包含您的兩個對象的兩個元素的數組，你可以做這樣的事情：

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; }); 
    }); 

這會給你這樣的嵌套結構：

<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> 

參見邁克的文章Nested Selections。