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