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>
こーなる