D3JS比例公式

Question

我有这个D3代码。我无法调整文本的位置，在圆圈之间保持一致。像this

这样的东西

我希望文字附加在每个圆圈的顶部附近，不在圆圈外面

这是我的D3代码，也链接到codepen

//http://codepen.io/christiansakai/pen/RPOJyQ
var data = [{
  text: 'Node 1',
  number: 30
}, {
  text: 'Node 2',
  number: 60
}, {
  text: 'Node 3',
  number: 10
}];

data = data.sort(function(prev, next) {
  return next.number > prev.number;
});

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

var yScale = d3.scale.linear()
               .domain([0, data[0].number])
               .range([0, h]);

var xScale = d3.scale.linear()
               .domain([0, data[0].number])
               .range([0, w]);

var colorScale = d3.scale.linear()
                   .domain([0, data[0].number])
                   .range(['orange', 'purple']);

var svg = svg.selectAll("circle")
             .data(data);

var elemGroup = svg.enter()
                   .append('g')
                   .attr('transform', function(d) {
                      return 'translate(' + (w / 2) + ', ' + (h - yScale(d.number / 2)) + ')';
                    });

var circles = elemGroup.append("circle")
                       .attr({
                         r: function(d) {
                           return yScale(d.number / 2);
                         },
                         fill: function(d) {
                           return colorScale(d.number);
                         }
                       });

var texts = elemGroup.append('text')
                     .attr('dx', function(d) {
                        return -20;
                      })
                      .attr('dy', function(d) {
                        return 0 - yScale(d.number / 2) + (yScale(d.number) / yScale(1));
                      })
                     .text(function(d) {
                        return d.text;
                      });