D3.jsを利用したSVGにテキストを3つ並べる

表示サンプルはこちら

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="text">
</div>

JavaScript

//テキストを3つ並べる
var width = 400;
var height = 400;
var svgtext = d3.select("#text")
.append("svg")
.attr("width",width)
.attr("height",height);

 var textspoint = [{text: 'りんご'}, {text: '100'}, {text: '円'}];

    var textsSelection = svgtext
      .append('g')
      .attr('transform','translate('+ width/2 +',' + height/2 + ')')
      .selectAll('text.numbers')
      .data(textspoint)
      .enter();

    textsSelection.append('text')
      .attr("fill", 'rgba(0, 0, 0, 0.8)')
      .attr("text-anchor", 'middle')
      .attr("font-size", function(d,i) {
          if(i == 0) {
              return "16px";
          } else if(i == 1) {
              return "136px";
          } else if(i == 2) {
              return "16px";
          }
      })
      .text(function(d) {
          return d.text;
      })
      .each(function(d,i) {
          var bbox = this.getBBox();
          if(i == 1) {
              value_width = bbox.width;
          }
      })
      .attr("x", function(d,i) {
              if(i == 0) {
                  return -value_width/2-15;
              } else if(i == 1) {
                  return 0;
              } else {
                  return value_width/2+15;
              }
      });

CSS

body{
    background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
}
#text {
  height: 500px;
  position: relative;
}
svg {
    width: 100%;
    height: 100%;
}