我正在 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>
关于javascript - 使用 D3 跳转 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41800673/