D3 erişim yuvalanmış veriler

Question

bu formatta bazı yuvalanmış veriler var: Ben bir çok satırlı grafiğinin çevre eklemek için bu verileri kullanmaya çalışıyorum

[{"key":"PFOA", 
    "values":[ 
    {"sampleDate":"2016-0126T05:00:00.000Z", 
     "shortName":"PFOA", 
     "pfcLevel":0, 
     "chemID":1}, 
    {"sampleDate":"2016-01-19T05:00:00.000Z", 
     "shortName":"PFOA", 
     "pfcLevel":0, 
     "chemID":1}, 
    {"sampleDate":"2016-01-12T05:00:00.000Z", 
     "shortName":"PFOA", 
     "pfcLevel":0, 
     "chemID":1} 
    ], 
    "visible":0} 
] 

. Ham, iç içe olmayan verileri doğrudan veritabanından kullanırsam bunu yapabilirim, ancak başka sorunlara neden oluyor. Mümkünse çizgiler ve daireler için aynı iç içe geçmiş verileri kullanmayı tercih ederim. yuva işlevi ve daire kod aşağıda: Ben d.values[sampleDate] veya .data(nested_data.values) gibi farklı şeyler denedim ama hepsi üzerinde tanımsız hataları alıyorum

var nested_data = d3.nest() 
     .key(function(d) { return d.shortName; }) 
     .entries(data); 

var circles = svg.selectAll(".circle") 
     .data(nested_data) 
     .enter().append("g") 
     .attr("class", "circle"); 

circles.append("circle") 
     .attr("stroke", function(d) { return color(d.key); }) 
     .attr("fill", "white") 
     .attr("cx", function(d, i) { return x(d.values['sampleDate']) }) 
     .attr("cy", function(d, i) { return y(d.values['pfcLevel']) }) 
     .attr("r", 2); 

.

Şimdiden teşekkürler.

Answer 1

Bir Nested Selection arıyoruz:

var nested_data = d3.nest() 
    .key(function(d) { 
    return d.shortName; 
    }) 
    .entries(data); 

var groups = svg.selectAll(".circle") 
    .data(nested_data) 
    .enter().append("g") 
    .attr("class", "circle"); 

var circles = groups.selectAll("circle") // start a nested selection 
    .data(function(d) { 
    return d.values; // tell d3 where the children are 
    }) 
    .enter().append("circle") 
    .attr("stroke", function(d) { 
    return color(d.shortName); 
    }) 
    .attr("fill", "white") 
    .attr("cx", function(d, i) { 
    return x(d.sampleDate) // use the fields directly; no reference to "values" 
    }) 
    .attr("cy", function(d, i) { 
    return y(d.pfcLevel) 
    }) 
    .attr("r", 2);