Text in oval

こーすると

<div id="div_tio" ><div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">


var dataset = [ {'name':'v1', 'x':1, 'y':0},
                {'name':'v2', 'x':2, 'y':0},
                {'name':'v3', 'x':3, 'y':0},
                {'name':'v4', 'x':4, 'y':0},
                {'name':'v5', 'x':5, 'y':0},
                {'name':'v6', 'x':6, 'y':0},
                {'name':'v7', 'x':7, 'y':0},
                {'name':'v8', 'x':8, 'y':0},
                {'name':'v9', 'x':9, 'y':0} ];
var radius  = 10;
var fill    = 'yellow';
var stroke  = 'black';

var width   = 200;
var height  = 20;
var padding = 10;

var domain = { 'x' : [ d3.min( dataset, function(d){ return d.x; }),
                       d3.max( dataset, function(d){ return d.x; } ) ],
               'y' : [ d3.min( dataset, function(d){ return d.y; }),
                       d3.max( dataset, function(d){ return d.y; } ) ] };
var range  = { 'x' : [ padding, (width  - padding) ] ,
               'y' : [ padding, (height - padding) ] };
var scale = {  'x' : d3.scale.linear().domain( domain.x ).range( range.x ),
               'y' : d3.scale.linear().domain( domain.y ).range( range.y ) };

var svg = d3.select('#div_tio').append('svg');
svg.selectAll('g').data( dataset ).enter()
    .append('g')
        .append('circle')
            .attr('cx', function(d){ return scale.x(d.x); } )
            .attr('cy', function(d){ return scale.y(d.y); } )
            .attr('r',  radius )
            .attr('fill', fill )
            .attr('stroke', stroke )
    .select( function(){ return this.parentNode; } ) // g
        .append('text')
            .attr('x', function(d){ return scale.x(d.x); } )
            .attr('y', function(d){ return scale.y(d.y)+radius/2; } )
            .attr("text-anchor", "middle")
            .text( function(d){ return d.name; } );

</script>

こーなる