1

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

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

    {
   "name" : "Sauria",
   "children" : [
      {
         "domains" : [
            {
               "name" : "BRCA2",
               "domain_start" : 100,
               "domain_stop" : 240
            }
         ],
         "common_name" : "NaN",
         "seq_length" : 200,
         "duplication" : "N",
         "name" : "ENSMGAP00000010132",
         "class" : "leaf",
         "bootstrap" : "NaN",
         "taxon" : "Meleagris_gallopavo"
      },
      {
         "domains" : [
            {
               "name" : "BRCA2",
               "domain_start" : 100,
               "domain_stop" : 240
            }
         ],
         "common_name" : "NaN",
         "seq_length" : 200,
         "duplication" : "N",
         "name" : "ENSACAP00000006049",
         "class" : "leaf",
         "bootstrap" : "NaN",
         "taxon" : "Anolis_carolinensis"
      }
    ],
   "bootstrap" : "15",
   "taxon" : null,
   "common_name" : "NaN"

要获取所有节点并绑定我的数据，我会这样做

 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
        }
     ],

我根本不知道如何遍历所有叶子和域数组的每个元素（请注意，这个数组可以有多个条目）。所以当我尝试使用“每个”时

 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";})
       })
       });

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

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

非常感谢！

4

1 回答 1

3

在嵌套选择中，您应该将嵌套数据作为参数传递给data()选择的函数。所以不是做div3.each，而是看起来像这样。

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

您应该能够使用未更改的其余代码。

于 2013-01-29T10:56:44.830 回答