は、私はこれと同じオブジェクトを持っているD3

Question

でネストされたデータを選択：

[{name: 'x', values: [1, 2, 3]}, {name: 'y', values: [4, 5, 6]}] 

私はD3.jsとそれを横断して、次のSVGを生成したいと思います：

<svg width="100" viewBox="0 0 50 50"> 
    <g transform="translate(0,10)"> 
    <circle cx="5" r="1"></circle> 
    <circle cx="15" r="2"></circle> 
    <circle cx="25" r="3"></circle> 
    </g> 
    <g transform="translate(0,30)"> 
    <circle cx="5" r="4"></circle> 
    <circle cx="15" r="5"></circle> 
    <circle cx="25" r="6"></circle> 
    </g> 
</svg> 

これは、私の試み：

data = [{name: 'x', values: [1, 2, 3]}, {name: 'y', values: [4, 5, 6]}]; 
var chart = d3.select('#chart').attr('width', 100); 
var row = chart.selectAll('g') 
    .data(data) 
    .enter().append('g') 
    .attr('transform', function(d, i) { return 'translate(0,' + 10 + i*20 + ')';}) 
    .append('circle').attr('r', function(d) {console.log(d);}); 

私はまだ動作していないので、それを終了しませんでした。コンソールからは、2番目の追加で、dが元の配列のすべての要素であることがわかります。どのように私は構造に降下するのですか？私は、2番目の追加でvalues配列の値を反復したいと思います。その値を取り、円を作るあなたは、各グループで、次の操作を実行する必要があり、円を作るための

var gs = svg.selectAll(".group") 
    .data(data)//make as many group as data 
    .enter() 
    .append("g") 
    .attr('transform', function(d, i) { 
    return 'translate(0,' + (10 + i * 20) + ')'; 
    }) 
    .attr("class", "group"); 

：あなたは円を追加する部分を除い正しくそれをやっているグループを作るための

Answer 1

。

var circles = gs.selectAll(".mycircle") 
    .data(function(d) { 
    return d.values; //circle made in terms of values array of each group 
    }) 
    .enter() 
    .append("circle") 
    .attr("class", "mycircle") 
    .attr("r", 4) 
    .attr("cx", function(d, i) { 
    if (i == 0) 
     return 5; 
    if (i == 1) 
     return 15; 
    if (i == 2) 
     return 25; 
    }) 

ご質問：私は構造に降りどうすればよいですか？以下は

あなたが構造に下降する必要がどのようにコード、

.data(function(d) { 
     return d.values; //circle made in terms of values array of each group 
     }) 

の作業コードhere

です