D3からの配列項目のネストされた要素だけをループするdata（）のselectAll作成

Question

残念ですが、これは愚かな質問ですが、D3を初めて使用していて、これは非常に不満です。

私はD3を使用して視覚化しようとしている大きなネストされたJSONオブジェクトがあります。私はdataArrに基づいてdivを作成するには、以下を使用している場合

var dataArr = [ 
    { 
     "name": "John", 
     "stats": [ 
      { 
       "stat": "Weight", 
       "values": [ 
        { 
         "val": 190, 
         "week": 1, 
        }, 
        { 
         "val": 170, 
         "week": 3, 
        } 
      }, 
      { 
       "stat": "Waist", 
       "values": [ 
        { 
         "val": 40, 
         "week": 1, 
        }, 
        { 
         "val": 36, 
         "week": 3, 
        } 
      } 
    }, 
    { 
     "name": "Fred", 
     "stats": [ 
      { 
       "stat": "Weight", 
       "values": [ 
        { 
         "val": 230, 
         "week": 1, 
        }, 
        { 
         "val": 200, 
         "week": 3, 
        } 
      }, 
      { 
       "stat": "Waist", 
       "values": [ 
        { 
         "val": 44, 
         "week": 1, 
        }, 
        { 
         "val": 38, 
         "week": 3, 
        } 
      } 
    } 
]; 

：私は、一例として、簡略化されたバージョンを使用します

var divs = d3.select("body").selectAll("div") 
     .data(dataArr) 
     .enter() 
     .append("div") 
     .attr("class", "outerDiv"); 

私に2つのdivを、ジョン用とのための1つを与えることフレッド。私が困っているところでは、それぞれの外側divの内側に2つのdiv（1つはWeightと1つはWest）を作成し、Johnのdivの下にはFredのdivのFredの下にネストされたデータにアクセスしたいとします。私はD3がこれを可能にしていると確信していますが、私の人生では、特に、ネストされたJSONオブジェクトとインデックスを作成する配列の両方を扱うデータを扱う際に、これを行う方法を理解できません。

誰かが正しい方向で私を指すことができたら、私はとても感謝しています。ありがとう。

var divs = d3.select("body").selectAll("div") 
    .data(dataArr) 
    .enter() 
    .append("div") 
    .attr("class", "outerDiv"); 


    var innerdiv = divs.selectAll("div") 
    .data(function(d){console.log(d); return d.stats}) //passing nested data 
    .enter() 
    .append("div") 
    .attr("class","innerdiv") 

としてあなたは変数に親を維持し、ネストされたデータを準備するためにそれらを反復する必要が

Answer 1

サンプル・フィドルは、ここでは、応答のためのhttp://jsfiddle.net/Qh9X5/9666/