d3選択要素を別の要素内に追加

Question

g要素内にcircleを作成したいとします。私はグループを作り、要素をうまく翻訳することができます。しかし、私は円をどのようにg要素に作成するかを理解していません。このコードでは

私は要素gと円を得ているが、円はg外である：

var data = [ 
    {"x": 10, "y": 10}, 
    {"x": 20, "y": 20}, 
    {"x": 30, "y": 30}, 
]; 

var svg = d3.select('svg'); 

var t = d3.transition().duration(750); 

    var group = svg 
    .selectAll(".groups") 
    .data(data) // JOIN 

    group.exit() // EXIT 
    .remove();  

    var groups = group.enter() // ENTER 
    .append("g") 
     .attr('class', 'groups') 
    .merge(group) 
     .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; }); 

    var circles = svg.selectAll('.circles') 
    .data(data) 
    .style("fill", "blue"); 

    circles.exit() 
    .style("fill", "brown") 
    .transition(t) 
     .style("fill-opacity", 1e-6) 
     .remove(); 

    circles.enter() 
    .append('circle') 
     .attr('r', 2.5) 
     .attr('class', 'circles') 
     .style("fill", "green") 
    .merge(circles) 
     .attr("r", (d) => d.y/5) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 

私はそれを解決することができますか？ここ は抜粋です：あなたはグループではなく、SVGを選択することで、グループに追加する必要がhttps://plnkr.co/edit/pnoSGSEv7pDo28HxRifd

Answer 1

：https://plnkr.co/edit/4WtXqUrDAdCkOYSdqori

：ここ

var circles = groups.selectAll('.circles') 
    .data(data) 
    .style("fill", "blue"); 

が更新されたコードです