D3JS圈在彼此之上

Question

我想让我的圆圈堆叠在一起，这样就可以看到较小的圆圈，例如this。

我现在所拥有的，即使较小的圆圈是第一个被追加的项目，但似乎它被其他更大的圆圈所掩盖。

这是我在代码笔上的代码。

// http://codepen.io/christiansakai/pen/RPOJyQ

var data = [10, 30, 50];
var w = 400, h = 300;
var svg = d3.select('.chart')
            .append('svg')
            .attr('width', w)
            .attr('height', h)
            .style({
              border: '1px solid black'
            });

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr({
     cx: 200,
     cy: function(d) {
       return d + (d / 2);
     },
     r: function(d) {
       return d;
     },
     fill: function(d) {
       return d3.rgb(1, 2 * d, 100)
     }
   });