Tree d3嵌套选择：如何访问数组数据

我在这里看过许多关于嵌套选择的类似帖子，但我没有成功地将问题转移到我的案例中。 我希望可以单独问这个问题

我有： 表示系统发育树的嵌套json结构（含物种）

要获取所有节点并绑定数据，我需要

 var node = d3.select("#tree svg").selectAll("g.node").data(nodes, function(d) { return d.id || (d.id = ++i); });

然后，我使用

 var nodeEnter = node.enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });

我像这样为每片叶子画一个矩形

 var div3 = nodeEnter.append("rect")
            .attr("x", 192)
            .attr("y", 160)
             .attr("width", function(d){return d.children ? "":"10";})
             .attr("height", function(d){
                   return d.children ? "": domainOnlyScale(d.seq_length);
            })
           .attr("transform", function(d){return d.children ? "":"rotate(-90 100 100)";})
           .attr("fill", function(d){return d.children ? "":"grey";});

现在是棘手的事情。我想使用每个叶子拥有的“域”中的数据在矩形上绘制一些东西，所以这部分

   "domains" : [
        {
           "name" : "BRCA2",
           "domain_start" : 100,
           "domain_stop" : 240
        }
     ],

我只是不知道如何迭代域数组的所有叶子和每个元素（注意，这个数组可以有几个条目）。所以当我尝试使用“每个”

d3告诉我“Object[Object Object]没有‘each’方法”，但我认为d.domains是一个数组

你能帮我访问这个嵌套的“域”信息吗

---

非常感谢

在嵌套选择中，应将嵌套数据作为参数传递给选择的

data（）

函数。因此，与其执行

div3.each

，不如这样做

div3.selectAll("rect").data(function(d) { return d.domains; }).enter()
    .append("rect")
    ...

---

您应该能够在不更改的情况下使用其余的代码。

nice，这很有效。谢谢但目前，我将一个rect作为子项添加到rect中，添加的rect似乎隐藏在最初创建的rect后面。我怎样才能避免呢？html看起来是这样的：您可以首先添加希望位于前端的矩形。将所选内容保存在一个变量中，并按您想要的顺序追加。没错，但这不是我要做的吗？我将所选内容保存在变量“div3”中，并用div3追加更多的矩形。selectAll（“rect”）.data（…）很抱歉造成混淆。是的，但您在追加其他内容后会这样做。您所需要做的就是更改附加内容的语句的顺序：）感谢您迄今为止的帮助。不幸的是，它仍然不起作用。我已经设法将所有代码放在一个JSFIDLE中。也许你可以看一下？重要的部分从第193行开始。非常感谢！

 div3.each(function(d) {    
        [d.domains].each(function(dom){
                    d3.select(this)
                   .append("rect")
                   .attr("x", 230)
                   .attr("y", 175)
                   .attr("rx", 5)
                   .attr("ry", 5)
                   .attr("width", function(d){return "12";})
                   .attr("height", function(d){
                        console.log("here we go again: "+d.name+" has length: "+(d.domains.seq_stop - d.domains.seq_start));
                           //var randomnumber=Math.floor(Math.random()*11)
                           return dom.domain_start;
                    })
                    .attr("fill", function(d){return d.children ? "":"red";})
       })
       });

div3.selectAll("rect").data(function(d) { return d.domains; }).enter()
    .append("rect")
    ...