D3アクセスネストしたデータ

Question

私はこの形式でいくつかのネストされたデータを持っている：私は複数行のグラフに円を追加するには、このデータを使用しようとしている

[{"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} 
] 

。生の非ネスト・データをデータベースから直接使用するが、それは他の問題を引き起こしている場合、これを行うことができます。可能であれば、ラインとサークルに同じネストされたデータを使用したいと思います。ネスト機能やサークルのコードは以下の通りです：

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

私はd.values[sampleDate]または.data(nested_data.values)のような別のものを試してみたが、私はそれらのすべてに未定義のエラーを取得しています。

ありがとうございます。あなたがNested Selectionを探している

Answer 1

：（ `circles.selectAll（ "円"）データ：

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