D3データとコンテナの結合

Question

いくつかのレベルでラッパー要素を使用してデータ結合を正しく行うにはどうすればよいですか？例えば、私はデータを持っていると言う[[a,b],[x,y]]、私はこれにそれを変換したい：

<wrapper1> 
    <content1> 
    <wrapper2> 
     <content2>a</content2> 
    </wrapper2> 
    <wrapper2> 
     <content2>b</content2> 
    </wrapper2> 
    </content1> 
</wrapper1> 
<wrapper1> 
    <content1> 
    <wrapper2> 
     <content2>x</content2> 
    </wrapper2> 
    <wrapper2> 
     <content2>y</content2> 
    </wrapper2> 
    </content1> 
</wrapper1> 

このような構造を持つ要素を作成する標準的な方法はありますか？

Answer 1

正確なツリー構造を作成するコードです。

outerSelectionは、2つの要素：[a, b]と[x, y]を持つ外部配列をデータとして使用します。第二のいずれかの最初のものと"x"と"y"ため"a"と"b"：

そして、innerSelectionデータとして内部配列、2つの要素を含む各1つを使用します。

クリックして「コンデ・スニペットを実行」し、あなたのコンソールを見て（あなたが拡大することができ、あなたのブラウザのコンソール、ないスニペットの1）：

var body = d3.select("body"); 
 

 
var data = [ 
 
    ["a", "b"], 
 
    ["x", "y"] 
 
]; 
 

 
var outerSelection = body.selectAll(null) 
 
    .data(data) 
 
    .enter() 
 
    .append("wrapper1") 
 
    .append("content1"); 
 

 
var innerSelection = outerSelection.selectAll(null) 
 
    .data(function(d) { 
 
    return d 
 
    }) 
 
    .enter() 
 
    .append("wrapper2") 
 
    .append("content2") 
 
    .html(function(d) { 
 
    return d 
 
    }) 
 

 
console.log(body.node())

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

あなたはこれを達成することができますd3 'data'関数を使用します。あなたはここで、データの2つのレベルを持っているように、これは私がそれを行うだろうかです：

data = [['a','b'],['x','y']]; 

d3.select("#div1") 
    .selectAll("wrapper1") 
    .data(data) 
    .enter().append("wrapper1") 
    .attr("d", function (d) { 
    d3.select(this) 
    .selectAll("content1") 
    .data(d) 
    .enter().append("content1") 
    .attr("d", function (d2) { 
    d3.select(this) 
     .append("wrapper2") 
     .append("content2") 
     .html(d2); 
    }) 
}); 

JSFiddle