Question

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

我有：嵌套的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告诉我“对象[对象对象]没有方法'每个'”，但我虽然d.domains是一个数组。

您能帮我查一下这个嵌套的“域名”信息吗？

非常感谢！

Answer 1

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

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

您应该可以不使用其余代码。

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

1 个答案: