選擇在D3

Question

嵌套數據I具有類似於此一個的對象：

[{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);}); 

我沒有完成它，因爲它不工作已經。從控制檯我看到在第二個附加中，d是原始數組的每個元素。我如何下降到結構？我想遍歷第二個append中values數組的值。

Answer 1

爲了使組你是做正確，除了在這裏你附加圓圈中的部分：

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"); 

對於決策圈，你應該做以下，每組取它的價值，並圈。

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