d3.jsが同じセレクタでデータメソッドを2回呼び出すときに奇妙な結果が発生する

Question

D3を初めて使用していて、矩形の外に構造体のようなテーブルを作成しようとしています。ヘッダーは長方形の残りの部分とは異なる色にしたいと思います。

table = svgContainer.selectAll('rect') 
        .data([managedObj]) 
        .enter() 
        .append('rect') 
        .attr("width", 120) 
        .attr("height", 20) 
        .attr("fill", "blue") 
        .text(function(d) { 
         return d.name; 
        }); 

       // create table body 
       table.selectAll('rect') 
        .data(managedObj.data) 
        .enter() 
        .append('rect') 
        .attr("y", function() { 
         shift += 20; 
         return shift; 
        }) 
        .attr("width", 120) 
        .attr("height", 20) 
        .attr("fill", "red") 
        .text(function(d) { 
         return d.name; 
        }); 

これが生産され、次の結果：私は、次のコードを書いた

これは、私はそれが最初の長方形の内側の長方形の第2のグループをネストされた以外意図したもので、ほとんどです。これにより、最初の青い矩形だけが表示されます。私はこれがデータメソッドを2回呼び出すことと関係があると仮定しています。この問題を解決するにはどうすればよいですか？

Answer 1

私が意図した結果を理解すると思うので、私はそれをやってみるよ：

このライン：

table.selectAll('rect') 

はちょうどここに作成した長方形を選択します

table = svgContainer.selectAll('rect')....append('rect').... 

この矩形（またはその矩形）に四角形を追加したくないのは、これは機能しないが、SVG自体に追加したいからです。

ので、代わりのtable.selectAllあなたがsvgContainer.selectAllを使用する必要がありますが、他の二つの問題があります。

1. あなたがsvgContainer.selectAll('rect')を使用する場合は、あなたが実際に空の選択をしたいときにはすでに、追加されているrectを選択されますが。 answer hereを参照してください。

2. あなたがg要素を追加し、それらにtextとrect要素を追加することができ代わりに、（answer hereを参照）RECTにテキストを配置することはできません。また、配置を簡単にするために、gの要素を変換して、長方形とテキストの配置をより簡単にすることができます。

だから、あなたのコードは次のようになります。

var data = ["test1","test2","test3","test4"]; 
 
\t 
 
var svgContainer = d3.select('body').append('svg').attr('width',900).attr('height',400); 
 

 

 
\t 
 
var header = svgContainer.selectAll('g') 
 
\t .data([data]) 
 
    .enter() 
 
    .append('g') 
 
\t .attr('transform','translate(0,0)'); 
 
\t \t \t \t \t 
 
header.append('rect') 
 
    .attr("width", 120) 
 
    .attr("height", 20) 
 
    .attr("fill", "blue"); 
 
\t 
 
header.append('text') 
 
    .attr('y',15) 
 
    .attr('x',5) 
 
    .text(function(d) { 
 
     return "header"; 
 
    }); 
 

 
    // create table body 
 
var boxes = svgContainer.selectAll('.box') 
 
    .data(data) 
 
    .enter() 
 
    .append('g') 
 
\t .attr('class','box') 
 
\t .attr('transform',function(d,i) { return 'translate(0,'+((i+1)*20)+')'; }); 
 
\t \t \t \t \t 
 
     
 
boxes.append('rect').attr("width", 120) 
 
\t .attr("height", 20) 
 
\t .attr("fill", "red"); 
 
\t \t \t \t \t \t 
 
boxes.append('text') 
 
\t .attr('y',15) 
 
\t .attr('x',5) 
 
\t .text(function(d) { 
 
     return d; 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>