26642


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

[code]

    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;
                   });
    
[/code]

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

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


CC BY-SA 3.0
2016-06-10T17:48:37.657
26638
2016-06-10T21:37:48.463
8100
question
d3.js
D3.jsにおける円の複数表示


このあたりD3のくせなので覚えておいた方が良いと思いますが、円1のコード`var graph1 =
...`が実行された後はsvg内にcircle要素がすでに追加された状態になっています。その状態で円2用の`svg.selectAll("circle")`を実行すると既に存在する円1のcircle要素が選択されてしまうのですが、D3では実際に存在する要素が選択された状態ではデータバインディングによる新要素追加ができないようです。

円2を実行する時の`selectAll`で円1のcircle要素が選択されないようにすれば良いので、例えば次のようにすれば円1と円2の両方が描画されるはずです。

[code]

    // 円1
    var graph1 = svg.selectAll("circle.top")
                   .data(dataset)
                   .enter()
                   .append("circle")
                   .attr("class", "top")
                   .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.bottom")
                   .data(dataset)
                   .enter()
                   .append("circle")
                   .attr("class", "bottom")
                   .attr("cx", function(d, i){
                      return i * (w / dataset.length);
                   })
                   .attr("cy", function(d){
                     return 300;
                   })
                   .attr("r", function(d){
                    return d;
                   });
    
[/code]


CC BY-SA 3.0
2016-06-10T21:37:48.463
26642
2016-06-10T21:37:48.463
13972
26638
answer