我正在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] .height。这些都有可能吗？
您的两个要求都是可能的。使用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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句