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は、「オブジェクト[オブジェクトオブジェクト]にはメソッド'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 に答える