用D3跳轉JSON

Question

我正在研究D3上的可視化，並且覺得必須有一種方法來做我想做的事情。

說我有JSON是這樣的：

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

創造約翰和Eric，然後外的div：

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>