免责声明:我对 D3 还很陌生，所以我确信这是可能的，但还没有弄清楚要搜索什么来解决它。
我正在尝试使用 D3 创建一个可视化，该可视化从一个充满嵌套 JSON 对象/数组的大型数组中提取。为了举例，假设我的对象如下所示:
var arr = [
{
"name":"John",
"info":[
{
"age":31,
"height":6,
"weight":155,
"eyes":"green"
},
{
"age":35,
"height":6,
"weight":165,
"eyes":"green"
}
]
},
{
"name":"Eric",
"info":[
{
"age":29,
"height":5,
"weight":135,
"eyes":"brown"
},
{
"age":30,
"height":5,
"weight":155,
"eyes":"brown"
}
]
}
]
现在，假设我想要获取这些数据并将其可视化，但需要使用比对象反射的嵌套级别更多的 div 来进行样式设置。所以，我想要如下所示的代码:
<div>
<h1>John</h1>
<div>
<div>
<div>
<h2>Age:31</h2>
<div>
<p>Weight:155</p>
</div>
</div>
<div>
<h2>Age:35</h2>
<div>
<p>Weight:165</p>
</div>
</div>
</div>
</div>
</div>
<div>
<h1>Eric</h1>
<div>
<div>
<div>
<h2>Age:29</h2>
<div>
<p>Weight:135</p>
</div>
</div>
<div>
<h2>Age:30</h2>
<div>
<p>Weight:155</p>
</div>
</div>
</div>
</div>
</div>
现在，如果我没有额外的 div，使用起来会相当简单
var visualization = d3.select("body").selectAll("div")
.data(arr)
.enter()
.append("div");
var person = visualization.selectAll("h1")
.data(function(d){return(d.name)}
.enter()
.append("h1")
.text(function(d){return d});
然后我可以对 div 执行相同的操作并循环遍历 d.info 来创建我需要的内容。但是，当我附加嵌套 div 时，我无法再使用父级的数据进行循环，并且似乎无法在 .data() 的自动循环中找到父级 div 的索引。
真的，我想要做的是根据arr[]的长度创建div，向该div附加一些诸如“名称”之类的信息，然后出于风格目的向根div附加一些div，然后得到返回到该根 div 的数据进行循环。我想使用 D3 来做到这一点，因为我知道这就是它的构建目的，但此时我准备使用 for 循环来暴力破解它，我知道我所在的索引，并且可以在更多情况下使用它嵌套数据。希望这是有道理的，但我完全不知道如何使用 D3 正确地做到这一点。
请询问是否有任何不清楚的地方 - 真的希望能弄清楚这一点。谢谢!
最佳答案
我不确定我是否完全理解您的问题。使用该数据复制您想要的结构并不困难。您可以根据需要附加任意数量的层并继续访问父数据:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var arr = [{
"name": "John",
"info": [{
"age": 31,
"height": 6,
"weight": 155,
"eyes": "green"
}, {
"age": 35,
"height": 6,
"weight": 165,
"eyes": "green"
}]
}, {
"name": "Eric",
"info": [{
"age": 29,
"height": 5,
"weight": 135,
"eyes": "brown"
}, {
"age": 30,
"height": 5,
"weight": 155,
"eyes": "brown"
}]
}];
var vis = d3.select("body").selectAll("div")
.data(arr)
.enter()
.append("div");
vis.append("h1")
.html((d) => d.name);
var nestedDivs = vis.append("div").append("div");
var innerDiv = nestedDivs.selectAll("div")
.data((d) => d.info)
.enter()
.append("div");
innerDiv.append("h2")
.html((d) => "Age:" + d.age);
innerDiv.append("div")
.append("span")
.html((d) => "Weight: " + d.weight);
</script>
</body>
</html>关于javascript - 如何使用 D3 处理重度嵌套对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41795363/