D3.jsにおける円の複数表示

D3.jsで複数の円を２列描画する際の質問です。
同じ配列を使って，y 座標の違う円の列をもう一列作りたいのですが，
下のソースコードでは２列目が表示されませんでした。
どのようにすればいいでしょうか。
graph2でcircleの代わりにrectを実行すれば表示されることはわかっています。

var w = 550, h = 350;
var dataset = [4,3,9,1,5,6,8];
// svg生成
var svg = d3.select("anime")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
// 円1
var graph1 = svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d, i){
                  return i * (w / dataset.length);
               })
               .attr("cy", function(d){
                 return 200;
               })
               .attr("r", function(d){
                return d;
               });

// 円2
var graph2 = svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d, i){
                  return i * (w / dataset.length);
               })
               .attr("cy", function(d){
                 return 300;
               })
               .attr("r", function(d){
                return d;
               });

何がしたいのかをより具体的に書くと，下のサイトで複数のソートアルゴリズムを比較するために複数の円の列を独立に表示させることがしたいです。

https://library-of-algorithm.herokuapp.com/anime_insertionsort