Jumping Around JSON with D3

Question

I'm working on a visualization on D3, and feel like there must be a way to do what I'm trying to do.

Say I have JSON like this:

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

Say I'm looping through the data using something like this:

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

to create outer divs for John and Eric, and then:

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

to loop through info for each and visualize it. However, my visualization requires that 1) I can access maxAge while looping through "info" and 2) I can access info[1].height when within info[0]. Are either of these possible?

Answer 1

Both your requirements are possible. Use d3Selection.each

Here is a demo -

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>