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>