D3でJSONの周りを回る

Question

私はD3のビジュアライゼーションに取り組んでいます。私がしようとしていることをやり遂げる方法が必要だと感じています。

は、私はこのようなJSONを持って言う：ジョンとエリックのための外側のdivを作成するために

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

、その後：

var arr = [ 
    { 
     "name":"John", 
     "maxAge": 35, 
     "info":[ 
      { 
       "age":31, 
       "height":6, 
       "weight":155, 
       "eyes":"green" 
      }, 
      { 
       "age":35, 
       "height":6, 
       "weight":165, 
       "eyes":"green" 
      } 
     ] 
    }, 
    { 
     "name":"Eric", 
     "maxAge":30, 
     "info":[ 
      { 
       "age":29, 
       "height":5, 
       "weight":135, 
       "eyes":"brown" 
      }, 
      { 
       "age":30, 
       "height":5, 
       "weight":155, 
       "eyes":"brown" 
      } 
     ] 
    } 
] 

は、私はこのようなものを使用してデータをループだと言います

var innerDivs = outerDiv.selectAll("p") 
    .data((d) => arr.info) 
    .enter() 
    .append("p") 
    .html("Weight = " + info.weight) 
    .attr("class","outerDiv"); 

それぞれの情報をループスルーして視覚化することができます。しかし私の視覚化では、1） "info"をループしながらmaxAgeにアクセスすることができ、2）info [0]内でinfo [1] .heightにアクセスできます。これらのいずれかが可能ですか？

Answer 1

両方の要件が可能です。ここでd3Selection.each

を使用してデモです -

var arr = [ 
 
    { 
 
     "name":"John", 
 
     "maxAge": 35, 
 
     "info":[ 
 
      { 
 
       "age":31, 
 
       "height":6, 
 
       "weight":155, 
 
       "eyes":"green" 
 
      }, 
 
      { 
 
       "age":35, 
 
       "height":6, 
 
       "weight":165, 
 
       "eyes":"green" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "name":"Eric", 
 
     "maxAge":30, 
 
     "info":[ 
 
      { 
 
       "age":29, 
 
       "height":5, 
 
       "weight":135, 
 
       "eyes":"brown" 
 
      }, 
 
      { 
 
       "age":30, 
 
       "height":5, 
 
       "weight":155, 
 
       "eyes":"brown" 
 
      } 
 
     ] 
 
    } 
 
] 
 

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

 
var innerDivs; 
 

 
outerDiv.each(function(d){ 
 
    innerDivs = d3.select(this) 
 
    .selectAll("p") 
 
    .data(d.info) 
 
    .enter() 
 
    .append("p") 
 
    .html(function(info,i){  
 
     var nextInfo = d.info[i+1];  
 
     if(nextInfo) console.log(JSON.stringify(nextInfo)); 
 
     return "Weight = " +info.weight +", MaxAge: "+d.maxAge; 
 
    }) 
 
    .attr("class","outerDiv"); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>