Javascript 仅通过D3 selectAll creation from data（）中数组项的嵌套元素循环

抱歉，如果这是一个愚蠢的问题，但我是D3新手，这让我非常沮丧

假设我有一个大型嵌套JSON对象，我正试图使用D3可视化它。我将使用简化版本作为示例：

var dataArr = [
    {
        "name": "John",
        "stats":  [
            {
                "stat": "Weight",
                "values": [
                    {
                        "val": 190,
                        "week": 1,
                    },
                    {
                        "val": 170,
                        "week": 3,
                    }
            },
            {
                "stat": "Waist",
                "values": [
                    {
                        "val": 40,
                        "week": 1,
                    },
                    {
                        "val": 36,
                        "week": 3,
                    }
            }
    },
    {
        "name": "Fred",
        "stats":  [
            {
                "stat": "Weight",
                "values": [
                    {
                        "val": 230,
                        "week": 1,
                    },
                    {
                        "val": 200,
                        "week": 3,
                    }
            },
            {
                "stat": "Waist",
                "values": [
                    {
                        "val": 44,
                        "week": 1,
                    },
                    {
                        "val": 38,
                        "week": 3,
                    }
            }
    }
];

如果我使用以下命令基于

dataArr

创建div：

var divs = d3.select("body").selectAll("div")
        .data(dataArr)
        .enter()
        .append("div")
        .attr("class", "outerDiv");

那将给我两张票，一张给约翰，一张给弗雷德。我遇到的麻烦是，我想在每个外部分区内创建两个分区（一个用于体重，一个用于腰围），并且只想访问John分区中John下和Fred分区中Fred下的嵌套数据。我确信D3允许这样做，但我一辈子都不知道如何做到这一点，尤其是在处理嵌套JSON对象和数组的数据时，这使得索引变得困难

---

如果有人能给我指出正确的方向，我将不胜感激。谢谢。

您需要将父对象保持在变量中，并迭代它们以准备嵌套数据

   var divs = d3.select("body").selectAll("div")
    .data(dataArr)
    .enter()
    .append("div")
    .attr("class", "outerDiv");


   var innerdiv = divs.selectAll("div")
   .data(function(d){console.log(d); return d.stats}) //passing nested data
   .enter()
   .append("div")
   .attr("class","innerdiv")

---

小提琴样品在这里

感谢您的回复。如果我在为数据目的追加div之前，为了文体目的而在outerDiv中追加div，这是如何工作的？我不知道如何继续将数据传递给outerDiv子级的子级以供以后使用，因为.data（函数（d）{return d}）似乎不允许只在data之后使用append&如果输入array，否则它将附加单个div，而且变量divs，innerdiv总是可以访问的。您想在第一级的子级中保留父级数据，依此类推，对吗？