使用D3

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）我可以在循环浏览“info”时访问maxAge，2）我可以在info [0]内访问info [1]。这些都可能吗？

Answer 1

您的要求都是可能的。使用d3Selection.each

这是一个演示 -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;