javascript - 使用 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");

为 John 和 Eric 创建外部 div，然后:

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

循环遍历每个信息并将其可视化。但是，我的可视化要求 1) 我可以在循环“信息”时访问 maxAge 和 2) 我可以在信息 [0] 内访问信息 [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>